Client-side JavaScript

October 8, 2024

There are different ways to use client-side JavaScript in JavaScript modules. You can either use:

  • Custom client-side JavaScript by simply loading it as static resources
  • React Hydration from React Server-Side Rendering components

Using React Hydration

Jahia’s JavaScript modules have native support for React Hydration, which means that it is possible to bootstrap a component on the server side using React SSR and then initialize its client-side state using the server-side rendered component. This is called React Hydration, and it is a very powerful way of combining the advantages of server-side rendering while still offering all the nice functionalities of client-side JavaScript execution.

Server-Side and Client-Side Component Separation

To facilitate the separation between server-side and client-side components within a React project, a new React component has been introduced: <HydrateInBrowser ... />. This component lets developers maintain static HTML rendering for server-side components while seamlessly integrating dynamic client-side hydration for specific components.

Component differences

  • Server-Only Components: Components declared without <HydrateInBrowser /> wrapper are designated as server-only components. They cannot be hydrated and have access to backend features.
  • Server-Rendered + Client-Side Hydrate Components: Components declared with <HydrateInBrowser /> wrapper can be used in views and will be automatically hydrated on the client side. However, they do not have access to backend features.

  Declaration Is rendered on the server Is rendered in the client
Views Declared with jahiaComponent, directly called from Jahia render chain Yes No
Templates Declared with jahiaComponent, directly called from Jahia render chain Yes No
Server only components Called from views, templates or other server only components Yes No
Hydrated components Called with HydrateInBrowser from templates, views other other components Yes (static HTML) Yes (interactive HTML)
Client-side components Called with RenderInBrowser from templates, views other other components No Yes

Full SSR vs. SSR + Hydration vs. CSR/RenderInBrowser vs. Single-Page-Application

We present here a table that compares the different types of implementation strategies that might be used and their strengths and weaknesses:

Feature/Functionality Server-Side Rendering (SSR) Server-Side Rendering with Client-Side Hydration (SSR+CS) Client-Side Rendering (CSR) Single-Page Application (SPA)
SEO Improved SEO as search engines receive fully-rendered HTML Combines benefits of SSR for SEO and initial load time with the interactivity of CSR SEO challenges as old search engines may not index dynamically rendered content SEO challenges as old search engines may not index dynamically rendered content
Initial Page Load Time Faster perceived performance for users due to pre-rendered HTML Faster time-to-interactivity as initial HTML is pre-rendered on the server Longer initial load times for the first-page visit due to fetching and rendering JavaScript assets Longer initial load times for the first-page visit due to fetching and rendering JavaScript assets
Real-time Updates Improved scalability as server load is reduced by offloading rendering to the client Complexity in managing client-side state, routing, and data fetching Improved scalability as server load is reduced by offloading rendering to the client Improved scalability as server load is reduced by offloading rendering to the client
User Interaction Better support for older browsers or devices that may not fully handle client-side rendering Increased complexity in development and debugging Faster subsequent page transitions and interactions as most rendering is handled on the client side Faster subsequent page transitions and interactions as most rendering is handled on the client side
Security Improved security by controlling data rendering on the server Complexity in managing client-side state and ensuring synchronization between server-rendered and client-rendered content Can be tricky if accessing server-side APIs; auth needs to be handled properly Can be tricky if accessing server-side APIs; auth needs to be handled properly
Offline Access & Performance Unavailable offline, performance depending only on the network Complexity in managing client-side state and ensuring synchronization between server-rendered and client-rendered content Better support for offline access and low network conditions Better support for offline access and low network conditions

Using other client-side JavaScript frameworks

You are free to run the JavaScript code you want on the client: the browser is not tied to React. However, we recommend you keep React as your client-side rendering technology as we are actively supporting and improving the tools Jahia offers through JavaScript Modules.