SSR(Server Side Rendering) & CSR(Client Side Rendering)
I am a versatile Product Developer and Frontend Engineer with a unique blend of creative UI/UX skills, specializing in Figma design, React.js, React Native, TailwindCSS, JavaScript, HTML, and CSS. My passion lies in crafting user-friendly and visually appealing products that seamlessly merge design and development principles. With a track record of creating three React Native applications and contributing to a groundbreaking product solution during my tenure with Skillvalley's Product Development Cohort, I am dedicated to shaping the digital landscape with innovative and user-centric solutions.
NEXT.JS Server & Client side rendering
Performance optimisation is one of the most important factor while building react applications.
We can achieve this with structured and organised rendering logic in NEXT.JS.
By splitting the component tree in server side and client side a smart and fast experience can be achieved.
1. Server Side Rendering (SSR):
NEXT.JS uses reacts API to leverage rendering. React renders server components in a special data format called React Server Component payload (RSC Payload).
Data fetching time: In NEXT.JS server components allows us to move data fetching activities to the server side near to the data source which eventually reduces data fetching time.
Security: It helps to keep sensitive information like API keys, tokens safe without exposing to client side users
Caching: Server side caching is a huge factor to reduce the cost of entire application by reusing the cached data to same requests.
Improved SEO: When a user sends a request, SSR handles all the business logic execution meanwhile all the HTML files with proper page indexing shows a First Contentful Paint (FCP) to the search in engine bots which improves the SEO and organic traffics.
Business logics, static contents should be handled through SSR.
To restrict server components to client side we can use “use-server-only” package to give build time errors while development if anyone accedentally imports Server side modules to Client side
2. Client Side Rendering (CSR):
Client components handle the user interactivity in UI. All the browser APIs (geolocation, local storage), use states, custom hooks, lifecycle can be managed from client side component rendering.
CSR components are distinguished by adding “use client” in the top of the file.
As the FCP appears in client side eventually the RSC Payload reconcile both client and server component tree and updates the DOM. Eventually the Client components are hydrated to interact with users.
Serialisation of Server components:
Some times we need to pass props from server components to client components. We can’t directly import server components in client components. Props should be translated in a suitable format of transferring over network, that is called serialisation.