Client-Side Rendering (CSR)
Last updated
What is Client-Side Rendering (CSR)?
In Client-Side Rendering (CSR) with React, the browser downloads a minimal HTML page and the JavaScript needed for the page. The JavaScript is then used to update the DOM and render the page. When the application is first loaded, the user may notice a slight delay before they can see the full page, this is because the page isn't fully rendered until all the JavaScript is downloaded, parsed, and executed.
After the page has been loaded for the first time, navigating to other pages on the same website is typically faster, as only necessary data needs to be fetched, and JavaScript can re-render parts of the page without requiring a full page refresh.
Free resources to learn Client-Side Rendering (CSR)
- Official docsClient-side Rendering (CSR)
- ArticleWhat is Client-side Rendering (CSR)?
More in stage 5: Rendering Strategies
Client-Side Rendering (CSR): common questions
Can I learn Client-Side Rendering (CSR) in Hindi?
This lesson is written in English. Once you sign in, open it in the interactive course and ask the AI tutor to explain Client-Side Rendering (CSR) in Hindi or Hinglish. The tutor answers from this lesson’s own text, so it stays on the syllabus, and it runs on your own Google, OpenAI or Anthropic key.
Is this Client-Side Rendering (CSR) tutorial for beginners?
It is lesson 14 of 94 in the free Next.js roadmap, in stage 5, Rendering Strategies. If you are new to Next.js, start from stage 1 and come back here in order; if you already know the earlier stages, this lesson stands on its own.