Building Server Side Rendering App with React and Vite.

[b4s36t4]

What is your article idea?

We have meta frameworks like Next.js and Remix to support server side rendering the application. But we don't know how those frameworks works underneath. This article is about understanding how we can build our own SSR systems with vite and react without need of meta framework.

Techstack

• React
• Vite
• React-router-dom

Need?

While we can't skip using the frameworks as they are more matured and solves many issues that we've never seen, but understanding what's happening and learning about SSR rendering from ground-up is needed.

What are the objectives of your article?

Objectives

• Understanding how SSR works underlying with react.
• Building a simple Server that renders our SSR components.
• Able to build & generate HTML on client side with API call support.
• Routing Logic & Router support.
• Deploying the application.

What is your expertise as a developer or writer?

Intermediate

What type of post is this?

Tutorial

Terms & Conditions

• I have read the Write for the Community program guidelines.

[Theodore-Kelechukwu-Onyejiaku]

Hi @b4s36t4 ,

This looks interesting 💪. You didn't mention the server you will use to render the react application. Will you be using Strapi or Express or what server please?

[b4s36t4]

@Theodore-Kelechukwu-Onyejiaku i didn't gave a thought but the server can be express or fastify. The underlying api call i.e rendering dynamic html can be done with strapi i.e as an example in users page I could load the data from strapi from serverside.

[Theodore-Kelechukwu-Onyejiaku]

That is awesome!

Please proceed. Thank you! Depending on the content of your article, this might change to intermediate.

[b4s36t4]

Hi, @Theodore-Kelechukwu-Onyejiaku . I think I'm done with my draft version.

Please checkout and leave the feedback -> https://hackmd.io/@b4s36t4/rkoS_qmzA/edit

This is my first time to write a fully professional blog, don't mind any mistakes I did.

Thanks!

[Theodore-Kelechukwu-Onyejiaku]

Hi @b4s36t4 ,

Thanks for your amazing contribution. I just skimmed your work. Could you please add the Github Repo to the full code to the draft. And could you also grant me an edit access to the draft?

Also, since we used Strapi for content management, it would be great we give this article the title "How to Build a React SSR Using Vite, Strapi and Express". What do you think about this?

[b4s36t4]

@Theodore-Kelechukwu-Onyejiaku I sure am okay with changing the title. I have given the link to github code in the Demo section of the blog, please check.

[b4s36t4]

I will share the edit access with you.

[b4s36t4]

@Theodore-Kelechukwu-Onyejiaku gave access to you, can. You let me know if it's accessible for you?

[Theodore-Kelechukwu-Onyejiaku]

Thank you!

[b4s36t4]

@Theodore-Kelechukwu-Onyejiaku any updates on this? Any changes required?

[Theodore-Kelechukwu-Onyejiaku]

Hi @b4s36t4 ,

Thanks so much for your contribution! 💪

At the moment, your work is in the review backlog. We don't need anything from you for now. Once again, thank you for your work and effort.