MagicJS
mern.aiUniversityGitHub
  • Introduction to MagicJS
  • Why MagicJS?
  • Getting Started & Installation
  • Basic Guide
    • Create a new page using React
    • Navigate between pages
    • Create an API and integrate it with the frontend
    • Authenticate Users
      • Authorise based on Roles
    • Advanced State Management with useContent()
    • Perform CRUD Operations
    • Adding Realtime capabilities using socket
    • Handling file uploads and downloads
  • Advanced Guide
    • Understanding the concept of features in MagicJS
    • Using UI components & functions across multiple Magic Features
    • Advanced Routing of pages
    • Enable SSR
    • Access MongoDB
    • Styling pages using Tailwind CSS
  • Deploying
  • Update MagicJS
  • API References
    • Frontend
      • <LinkDisplay>
      • createSrc()
      • createUploader()
      • importUI()
      • loadConfig()
      • protected()
      • useParams()
      • useAxios()
      • useLogin()
      • useSocket()
      • useContent()
      • usePromise()
      • useNotification()
    • Backend
      • createBackendFunction()
      • data()
      • io()
      • ServerInstance()
      • utils
        • hash()
        • verifyHash()
        • initiateEmailVerification()
        • saveFileToUserUploads()
        • readFileFromUserUploads()
        • removeFileFromUserUploads()
        • assignRoleToUser()
        • unassignRoleFromUser()
        • findAllRolesByUser()
        • isUserInAnyRoles()
        • assignRoleToUser()
Powered by GitBook
On this page
  • SSR Support Under the Hood
  • Enabling SSR in app.json
  • Lazy Loading

Was this helpful?

  1. Advanced Guide

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!

PreviousAdvanced Routing of pagesNextAccess MongoDB

Last updated 1 year ago

Was this helpful?