yijay

?? （nullish coalescing operator） 用法 // pseudocode，大概示意，非完整 code const items = ["abc", "", 123, 0, true, false, null, undefined]; {items.map(item => { return ( {`${item} ?? '找不到 item'`} ); })} 結果圖 情境 有一個 data 回傳值如下，且 true、false 在程式內都可能用到 data: { isTeacher: false } 如果預設值為 false，那使用 || 或是 ?? 都是沒有問題 data.isTeacher || false //output: false data.isTeacher ?? false //output: false 但如果預設值為 true，那這時候使用 ?? 才會正確，或是用 || 並配合額外處理的 code data.isTeacher || true //output: true data.isTeacher ?? true //output: false || （or operator） 用法 // pseudocode，大概示意，非完整 code const items = ["abc", "", 123, 0, true, false, null, undefined]; {items.map(item => { return ( {`${item} || '找不到 item'`} ); })} 結果圖 情境 || 就大部分情況都在使用，像回傳值為 undefined，就直接使用「 data.count || 0 」，就能得到 0 此預設值。

一、CSR import { useEffect, useState } from 'react'; interface Post { userId: number, id: number, title: string, body: string, } const Home = () => { const [post, setPost] = useState<Post>(); useEffect(() => { fetch('https://jsonplaceholder.typicode.com/posts/1') .then((res) => res.json()) .then((res) => setPost(res)); }, []); return ( <div> <h1>{post?.title}</h1> <p>{post?.body}</p> </div> ) } export default Home 二、SSR import type { GetServerSideProps } from 'next' interface Post { userId: number, id: number, title: string, body: string, } interface HomeProps { post: Post, } const Home = ({ post }: HomeProps) => { return ( <div> <h1>{post.title}</h1> <p>{post.body}</p> </div> ) } export default Home export const getServerSideProps: GetServerSideProps = async ()

概述 How to update meta-tag in react? 這問題想必前端工程師都有碰過，但這邊先告訴大家，想透過「純前端」修改... 「不可能」...!! 為什麼？ Google 搜尋引擎在爬文的時候，透過 javascript 產出來的標籤是無法爬到。 像現在有使用 react、vue、angular 等等這類的框架，這種 SPA、前後端分離的程式架構，都是透過 javascript render 出來的網頁，因此 SEO 肯定受限十足。 又有人可能會說，Google 搜尋引擎已經可以爬 javascript 產生的 tag，確實現在框架的盛行，Google 勢必還是得對這做處理，畢竟他們的網站也是有使用框架來進行。 問題 那 Google 都能爬 javascript 產生的 tag 現在還會有什麼問題呢？ 「動態產生 meta tag」 這部分並非透過前端就能「完美」達到。 怎麼說？ 透過動態產生出來的，那網址剪下貼至 FB、Line 等等之類的，都會無法顯示那些 tag，那 SEO 上勢必還是打折了。 解決 相信很多人一定都有找了很多解法，以下就列出幾個解法供參考 (X) 1. react-helmet (X) 2. react-helmet-async (X) 3. react-super-seo (O) 4. next.js (O) 5. remix (O) 6. environment variable (env) 從以上可以看出 javascript 前端方式處理得仍無法解決，必定要透過 SSR 的方式，或是環境變數來處理。

概述 update meta-tag in react 正確的動態解決 meta-tag 方式，透過 env。 沒有裝 next.js 的專案可以用這招。 嘗試過 react-helmet 無效者也請用這招。 流程 1. get data in node.js -> 2. set env to index.html -> 3. build and test -> 4. success! 1. get data in node.js 純前端者，不要看到後端就跑，這邊只是寫一點點，沒很多 建立 script.js // const fs = require('fs'); // const pathConfig = './config.json'; // const config = JSON.parse(fs.readFileSync(pathConfig)); // const title = config.title; // const description = config.description; const execSync = require('child_process').execSync; const title = 'EJ的網站標題'; const description = 'EJ的網站描述'; const favicon = 'https://firebasestorage.googleapis.com/v0/b/deploy-for-chien313jay-test.appspot.com/o/images%2Ffavicon.ico?alt=media&token=d019d820-16a3-45fd-b5e5-15b8aa355ea8'; execSync(`VITE_APP_TITLE="${title}" VITE_APP_DESCRIPTION="${description}" VITE_APP_FAVICON="${favicon}" CI=false npm run dev`); 這樣就把 env 寫至你的