好程式設計師web前端分享什麼是前端同構渲染

　　好程式設計師 web 前端分享 什麼是前端同構渲染 ， 同構渲染指的是前後端都使用了 js ，首次渲染的時候使用 nodejs 載入了我們的 HTML 檔案，用小白的話來說，同構渲染既不屬於後端渲染，也不屬於前端渲染，它是介於二者之間的共有部分。同構渲染的實現其實就是 SSR+CSH, 他們是透過一份程式碼而實現的。

　　 在這裡提到了前端渲染和後端渲染，他們各自都有自己的優勢吧。前端渲染的優勢包括：可以區域性重新整理、可以實現懶載入技術、可以使用 js 實現各種炫酷的效果、可以透過 cdn 伺服器訪問資源、前後端分離開發、學習成本相對較低。後端主要的優勢有：可以很好的解決首屏載入的問題、利於 seo 的最佳化。

　　 隨著技術的發展，像 Vue 和 React 框架已經能夠實現很好的同構渲染，也就是我們常說的 SSR ，比如說 nuxt.js 和 next.js 。在前端渲染異常普遍的今天，我們為什麼會有同構渲染的技術出現呢？

　　 上面已經介紹到了，同構渲染其實可以解決首屏載入緩慢和 SEO 的最佳化問題。

　　 傳統的搜尋引擎 透過從  HTML 檔案   中抓取 我們所需要的 資料， 這樣的話 前端渲染的頁面 就 無法被抓取 到 。 開發過 vue 和 react 專案的開發者都知道，我們 常使用的 SPA 會把所有 JS 整體打包， 不可忽略的一個問題就是 檔案太大，導致渲染前等待很長時間。特別是網速差的時候，讓使用者等待白屏結束並非一個很好的體驗。

　　 服務端渲染可以 先將 使 用的 資料渲染成最終 HTML 直接展示，理想情況下能避免白屏問題。 但是凡事無絕對，如果一個頁面的資料量過大，那也不可避免的會有等待情況的發生。

　　 說到 PHP ， JSP 的渲染模式，他們都是前端寫完頁面之後交給後端，後端透過模板引擎渲染出來的 HTML 頁面，字尾名為 php 或者 jsp 。透過中的 SSR 其實原理也是一樣的，只不過多了一層 CSH 而已，它的實現需要服務端提供一份初始化的資料。