React (software): Difference between revisions

Revision as of 13:59, 6 March 2025

Revision as of 18:46, 7 March 2025

Line 138:

=== Server-side rendering ===

{{Unreferenced section|date=May 2024}}

[[Server-side scripting|Server-side rendering]] (SSR) refers to the process of rendering a client-side JavaScript application on the server, rather than in the browser.<ref This can improve the performance of the application, especially for users on slower connections or devices.name="MDNSSR">

{{cite web

|title=Server-side rendering (SSR) - MDN Web Docs Glossary

|url=https://developer.mozilla.org/en-US/docs/Glossary/SSR

|website=MDN Web Docs

|publisher=Mozilla

|access-date=7 March 2025

}}

</ref> This can improve the performance of the application, especially for users on slower connections or devices.<ref name="GoogleRendering">

{{cite web

|title=Rendering on the Web

|url=https://web.dev/rendering-on-the-web/

|website=web.dev

|publisher=Google

|date=6 February 2019

|access-date=7 March 2025

}}

</ref>

With SSR, the initial HTML that is sent to the client includes the fully rendered UI of the application.<ref This allows the client's browser to display the UI immediately, rather than having to wait for the JavaScript to download and execute before rendering the UI.name="CSS-Tricks-SSR">

{{cite web

|last=Jain

|first=Atishay

|title=Render Caching for React

|url=https://css-tricks.com/render-caching-for-react/

|website=CSS-Tricks

|date=10 November 2018

|access-date=7 March 2025

}}

</ref> This allows the client's browser to display the UI immediately, rather than having to wait for the JavaScript to download and execute before rendering the UI.<ref name="CSS-Tricks-SSR" />

React supports SSR, which allows developers to render React components on the server and send the resulting HTML to the client.<ref This can be useful for improving the performance of the application, as well as for [[search engine optimization]] purposes.name="ReactDoc">

{{cite web

|title=Server React DOM APIs

|url=https://react.dev/reference/react-dom/server

|website=React Documentation

|publisher=Meta Platforms

|access-date=7 March 2025

}}

</ref> This can be useful for improving the performance of the application, as well as for [[search engine optimization]] purposes.<ref name="NextDocs">

{{cite web

|title=Rendering (Next.js Documentation)

|url=https://nextjs.org/docs/pages/building-your-application/rendering

|website=Next.js Documentation

|publisher=Vercel

|access-date=7 March 2025

}}

</ref>

== Common idioms ==