How server side rendering happens in Remix

The term ssr refers to fetching data in server and construct html in server and send back to website. With Remix ssr done with dynamically with hydration where javascript inject when browser render html. Its plus point with remix.

Here I'll explain how to perform ssr and verify it 

Step 1: 

Here is a example of ssr in remix where we define a function with name loader its mendatory to name loader to achieve ssr and return something to not to get error.

import { json } from '@remix-run/node'

export async function loader({ params }) {
  const { postid } = params

  if (!postid) {
    throw new Response('Id not found', { status: 404 })
  }
  if (postid == 'favicon.ico') return

  const article = await service.getPost(postid)

  if (!article) {
    throw new Response('article not found', { status: 404 })
  }
  return json({ article })
}

Step 2:

Use the loader data in component through useLoaderData().

export default function Post() {
  const { article } = useLoaderData();

return(
<div>
  <div>
            <img
              src={service.getFilePreviews(article.image)}
              alt={article.title}
              className="rounded-xl"
              loading="lazy"
            />
            <div className="mt-5 prose dark:prose-invert overflow-scroll scrollBar text-xl">
              {parse(article.content)}
            </div>
    </div>
</div>
)
}

Step 3: 

Verify its fetching data in ssr or not!!

First when fetching data using loader when page loads go to view page source and click on it and find the fetched content appears or not if its appears it fetching data in ssr or else its not fetching data in ssr.