Client-side JavaScript
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.