What is client-side rendering?
Client-side rendering is basically rendering the content of HTML in the client's machine. The server sends a basic HTML template to the client's machine (the browser). The browser then follows the links inside that HTML and loads all the required files after which it processes the HTML content and injects JavaScript into the page, this process is also called Hydration. Learn more about it here:
If you come from React background you might be familiar with below code. React renders every HTML page by inserting each and every code inside the `div` with id `root`. The server only sends a blank HTML page with necessary links and scripts which is used by browser to load the files and execute it to render the HTML page dynamically.
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><link rel="icon" type="image/svg+xml" href="/vite.svg" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Tech Backwards</title></head><body><div id="root"></div></body></html>(code-box)
But how ?😵
Let's take an example,
import Highlight from "react-highlight-js";function MyHighlighter() {const content = `if(i>=0){print("I Love Tech B")}`;return (<div className="App"><Highlight style={{ clear: "both" }}>{content}</Highlight></div>);(code-box)
What would happen if we run above code in our NextJs application ? It seems fine that we are importing `Highlight` from a library called `react-highlight-js`. and using it to highlight our content.
But what point should be noted is NextJs renders its pages in server by default. So, it doesn't expose any API like `window` or `browser`. But `Highlight` uses the window property to highlight our content which in case of React is fine but it will crash when run in NextJs application.
So, to overcome this we use client-side rendering where above mentioned API are available as the page is rendered in browser itself.
Normally there are three methods:
If you have any doubts. Please let me know