CSR / SSR repo

Today I want talk about Client side render and Server side render.

I think the significant difference with each other is viewable in different place.We can see the picture blow:

Now viewable at different place.

But , here are the questions-

1. Is SSR still relevant ? If yes , where to use it.
2. The best approach for you?

Server-Side Rendering

In SSR, when the user makes a request to the webpage, the server prepares the HTML page by fetching the required data from the database and sends to the user’s machine over the internet.

• Then the browser presents all the requested actions on the user UI. All these processes of fetching data from the database to creating an HTML page
• and sending it to the client are done in mere milliseconds.

This method is viable if all your website need is to display images/ texts, links to click, and is more on the static side.

In server-side rendered pages, it is common to use snippets of jQuery to add user interactivity to each page.However, when building large apps, just jQuery is insufficient.After all, jQuery is primarily a library for DOM manipulation and it’s not a framework; it does not define a clear structure and organization for your app.

Developers are approaching CSR as modern-day development is mostly about JS libraries and frameworks.The popularity of modern-age JS shifted all the attention to CSR.

Client-side rendering means that a website’s JavaScript is rendered in your browser, rather than on the website’s server.

So now, instead of getting all the content from the HTML doc, only the required HTML with the JS files will be rendered.The rendering time for the first upload is a bit slow. However, the next page loads will be very fast as we don’t have to wait for every page render.Moreover, there is no need to reload the entire UI after every call to the server.The client-side framework manages to update UI with changed data by re-rendering only that particular DOM element.

Also, a clear client-server separation scales better for larger engineering teams, as the client and server code can be developed and released independently. This is especially so at Grab when we have multiple client apps hitting the same API server.

比較優缺點

For more clear view let’s see some benefits and downside of both rendering methods-

SSR

Benefit of SSR — SSR 優點

1. The initial page of the website load is faster as there are fewer codes to render.網頁加載的處使頁面更快，因為要呈現的代碼更少．
2. Good for minimal and static sites.適用於最小和靜態站點
3. Search engines can crawl the site for better SEO.可以使SEO更好的被捕獲

Downsides of SSR — SSR 缺點

1. the site interactions are less.互動性少的
2. Slow page rendering.緩慢的頁面渲染
3. Full UI reloads.所有的UI 重新加載
4. Frequent server request.頻繁的發送需求給伺服器

• We had told about that a few days ago, if thousands of client side bowser sending request, the server will be broken. That’s why Developers are approaching CSR in modern-day.

CSR

Benefit of CSR — CSR 優點

1. The app feels more responsive and users do not see the flash between page navigations due to full-page refreshes.不會因為頁面轉導時畫面仔入產生閃爍

• Fewer HTTP requests are made to the server, as the same assets do not have to be downloaded again for each page load.對伺服器發出的HTTP request更少.
• Clear separation of the concerns between the client and the server; you can easily build new clients for different platforms (e.g. mobile, chatbot, smartwatches)without having to modify the server code.You can also modify the technology stack on the client and server independently as long as the API contract is not broken.更清楚分離克賦予伺服器之間的關注點，你可以更清楚地建立不同的客戶平台，不需要去改動巳服器端程式，你還可以獨立修改客戶端和技術端的技術堆疊, 當API連線還沒有斷掉時。

Downsides of CSR — CSR缺點

1. 有初始化頁面載入，由於加載了框架，app程式和附檔的許多頁面.Heavier initial page load due to loading the framework, app code, and asserts required for multiple pages.
2. 這裡有一個額外的步驟需要在伺服器完成，用在安排所有跳頁要求，給單一進入口並且允許 client-side 路線 去接管他們
3. 大部分的案例中，request 都是額外的library
4. 所有的搜尋引擎在執行 JS 實作抓取，並且他們會看到空白的頁面．這在你的APP不經意間影響了SEO.

但大部分的時間，當你建立了APP，SEO並不是首要重要的事實，不是所有內容都需要被SEO收錄.為了克服這一點，你可以而非使用Server side render 在你的app中，而使用Prerender 在瀏覽器中去 render 你的 JS, 儲存你的HTML並且返回他們給Google爬蟲.

什麼時候使用Server side render

1. 應用程式的UI很單純，且比較少的「頁面和功能」
2. 應用程式有較少的動態資料
3. 閱讀成分大於寫入成分
4. Q1. The focus is not on the rich sites and has few users.

什麼時候用Client side render

1. 應用程式有許多複雜的UI，且許多的「頁面和功能」
2. 應用程式有龐大且需動態的資料
3. 寫入成分大於閱讀成分
4. 有許多的 focus 且使用者很多

渲染需求完全取決於需求要求和UX客戶計畫. 最終決定使用CSR 或 SSR.希望正篇文章能夠幫助到你了解基本的渲染練習.感謝閱讀.