{"id":19317586,"url":"https://github.com/queeniecplusplus/react_static_markup","last_synced_at":"2025-10-10T02:07:00.343Z","repository":{"id":104588453,"uuid":"278823087","full_name":"QueenieCplusplus/React_static_markup","owner":"QueenieCplusplus","description":"react 伺服器端渲染函式","archived":false,"fork":false,"pushed_at":"2020-07-12T03:17:20.000Z","size":50,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-02-24T04:44:28.794Z","etag":null,"topics":["es5-javascript","reactjs"],"latest_commit_sha":null,"homepage":"https://github.com/QueenieCplusplus/QuickGoThru#react","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/QueenieCplusplus.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-07-11T08:44:51.000Z","updated_at":"2020-07-12T03:17:22.000Z","dependencies_parsed_at":null,"dependency_job_id":"1f91c1ac-e279-4508-b7cf-e92228e3b227","html_url":"https://github.com/QueenieCplusplus/React_static_markup","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/QueenieCplusplus/React_static_markup","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/QueenieCplusplus%2FReact_static_markup","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/QueenieCplusplus%2FReact_static_markup/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/QueenieCplusplus%2FReact_static_markup/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/QueenieCplusplus%2FReact_static_markup/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/QueenieCplusplus","download_url":"https://codeload.github.com/QueenieCplusplus/React_static_markup/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/QueenieCplusplus%2FReact_static_markup/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279002528,"owners_count":26083399,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-10T02:00:06.843Z","response_time":62,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["es5-javascript","reactjs"],"created_at":"2024-11-10T01:15:37.405Z","updated_at":"2025-10-10T02:07:00.326Z","avatar_url":"https://github.com/QueenieCplusplus.png","language":"JavaScript","readme":"# React static markup\nreact 伺服器端渲染函式，靜態標記 static markup 與同步字串 render to string\n\n# Life Cycle 生命週期\n\n伺服器端沒有任何適合的生命週期提供元件何時執行完畢，唯有在客戶端的 componentDidMount 週期時建立事件監聽器和計時器，而 componentWillUnmount 週期時停止監聽器和計時器。\n\n# Checksum 校驗\n\n使用 data-react-checksum 匹配，幫助 react 在伺服器和客戶端兩者每次渲染屬性的初始結果都會一致，將應用程式的初始狀態傳給用戶端。\n\n    renderToString()\n    //同步字串\n    //輸出會有 reactid 和 checksum\n\n蠢作法是 react 銷毀伺服器提供的 實體 DOM 並生成 react 自己的虛擬 DOM 節點並且附加入文件物件中。所以如上是同步渲染函數，可以進行很重要的事情，這攸關到性能表現！\n\n\n    renderToStaticMarkup()\n    //靜態標記\n    //單行輸出\n    //適用於測試元件或是電子郵件\n    //輸出不會有屬性 reactid\n    \n 用於測試元件或是電子郵件 https://github.com/QueenieCplusplus/React_email/blob/master/README.md#send-email\n    \n作法是 react 銷毀伺服器提供的 實體 DOM 並生成 react 自己的虛擬 DOM 節點並且附加入文件物件中。\n\n如上兩則函數使 react 能夠在 Nodejs 這種非瀏覽器的環境下運作。\n\n# 客戶端的非同步狀態\n\n很多應用程式都是前端顯示遠端後端（伺服器抑或是資料庫）的資料，\nReact 元件可以等待非同步資料時顯示一個載入 Loading 的畫面。\n這要先取的非同步資料，再 render 資料給元件。\n\n實務上，要從非同步儲存中取得一筆使用者紀錄給元件使用，也為了\n優化 SEO，需要將此非同步資料在伺服器端 render 元件，增加屬性。\n\n# SEO\n\n支持用戶端和伺服器端渲染同一元件。可以採用同構路由法抑或是直接ㄓㄞ componentDidMount 生命中其中獲取 Async 資料，類似 Ajax （asyn of js and xml)。\n\n# Singleton 單例\n\n在 Browser 中，應用程式封裝在隔離 isolated 的 sandbox 中，所以應用程式的每一個 instance 實例的狀態不能和其他 instance 混淆，因為每一個實作在不同電腦或是同台電腦的不同沙盒中，所以這允許開發人員在應用程式架構中使用 Singleton。\n\n然而開發者如果要移動程式碼到伺服器上，同一時間同一作用域下，應用程式可能有多個實作運作中，這時應用程式的兩個實作改變同一單例的狀態，導致預期外錯誤發生。\n\n因此，要 render 伺服器前（包含客戶端向遠端獲取非同步狀態），需要重設所有使用過的單例，然而每重開一個環境，會耗損其效能。\n\n另一種方式是實作，實作和執行環境在元件樹中往下傳，這使得元件不容易移植 portable，而且也會改變一層元件深度依賴上層元件，這會產生應用程式更複雜、更難維護的影響。\n\n以上兩種方式，要先評估用到的第三方程式庫的架構！\n\n# 同構路由\n\n對於 SEO 來說，責任上移到路由控制器，故資料應該傳到元件中。讓路由器處理將 initialState 傳給用戶。\n\n\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fqueeniecplusplus%2Freact_static_markup","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fqueeniecplusplus%2Freact_static_markup","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fqueeniecplusplus%2Freact_static_markup/lists"}