Enable SSR

Enabling Server-Side-Rendering (SSR) is a simple process, and this documentation will guide you through the necessary steps.

SSR Support Under the Hood

MagicJS provides seamless under-the-hood support for SSR once it is enabled in the app.json file. This means that the specified routes with SSR enabled will be rendered on the server side, enhancing the performance and SEO-friendliness of your application.

Enabling SSR in app.json

To enable SSR for specific routes, you need to update the routes section in your app.json file.

For each route where you want SSR to be enabled, set the ssr property to true.

Here's an example snippet:

{
    "routes": [
        {
            "path": "/",
            "ssr": true,
            "view": "features/my-feature/home.tsx"
        },
        // Additional routes...
    ]
}

In this example, the route "/" has SSR enabled ("ssr": true).

Make sure to replace "features/my-feature/home.tsx" with the actual path to your React component or other view that you want to render on the server.

Important Considerations

  1. Component Preparation: Ensure that the components specified in the SSR-enabled routes are designed to work seamlessly in both client and server environments. Be cautious of using client-side-specific code that may not be supported on the server.

  2. Route Configuration: SSR is configured on a per-route basis. Not all routes need to have SSR enabled, and you can selectively choose which routes should benefit from server-side rendering.

MagicJS makes Server-Side Rendering easy and efficient with its built-in support. By adding the ssr property to the desired routes in the app.json file, you can enhance the performance and SEO capabilities of your application.

Lazy Loading

We're diligently crafting the documentation, and it's poised for an imminent release! Stay tuned for an insightful resource coming your way soon!

Last updated