When using standard Web Components in a server-side framework like Next.js, you may encounter issues with the initial rendering of the component. This is because server-side rendering (SSR) does not have access to the browser's DOM, which is necessary for Web Components to function correctly.
Unfortunately, there's no way marker.js can handle this internally so you will need to address this in your application code. Here are some general guidelines to help you work with marker.js in a server-side framework like Next.js:
Lazy-Loading and Client-Side Rendering: Ensure that the marker.js component is only rendered on the client side. You can use dynamic imports or conditional rendering to achieve this. For example, in Next.js, you can use next/dynamic to load the component only on the client side. You can find documentation on skipping server-side rendering in Next.js here.
Use useEffect: If you're using React, wrap the marker.js initialization code inside a useEffect hook to ensure it runs only after the component has mounted in the browser. This way, you can safely access the DOM and initialize marker.js.
Check for window: Before initializing marker.js, check if the window object is available. This ensures that your code only runs in the browser environment and not during server-side rendering.
The actual marker.js-related code is the same as it would be in a regular React application. However, you need to ensure that the component is only rendered on the client side to avoid issues with server-side rendering.
You would need to have two React components: one for the actual marker.js code and another for the client-side component that loads it.
For the marker.js code you can refer to the Getting Started with React guide, which provides a detailed example of how to use marker.js in a React application.
For the client-side code, you can create a component that uses next/dynamic to load the marker.js component only on the client side:
"use client";
import dynamic from "next/dynamic";
// Here AnnotationEditorBody is the component that contains the marker.js logic
const AnnotationEditorBody = dynamic(() => import("./AnnotationEditorBody"), {
ssr: false,
});
export function AnnotationEditor() {
return <AnnotationEditorBody />;
}
This code ensures that the AnnotationEditorBody component, which contains the marker.js logic, is only rendered on the client side, avoiding any issues with server-side rendering.