Home

Real Estate Agency

Real Estate Agency

Context

This application is a project realized as part of my training taught on Udemy entitled " React - Maitriser le rendu coté serveur avec Next.js", course given in French. It allowed the participants to put into practice everything they learned throughout the training.

Challenges and Development

React is one of the most used javascript frameworks in the world. Front-end developers use it to develop their applications. Often they are confronted with different problems when they want to develop applications that can be indexed by search engines.

Indeed React uses client-side rendering like any other SPA (Single page Application) such as Vue.js, Angular or Svelte, i.e. the browser will first download all the javascript then execute it and then the page becomes visible. this has some drawbacks

  • The initial loading time will be longer because the browser will first download and then execute the js.
  • Difficulty to reference an application because search engine robots do not have access to the html of the page because it is executed on the client side.

To solve this problem with React, we use server-side rendering with a Node.js server, but this also involves configurations that are often very daunting for beginners:

The developer must :

  • configure Webpack
  • configure the splitting code (partitioning of the code)
  • configure the splitting code (partitioning of the code)
  • manage the minification of the code
  • hydrate the routes etc...

There are several configurations and modifications to be made to implement server-side rendering and for an inexperienced developer this can be challenging and it is not as advisable to implement server-side rendering on its own but to use existing solutions to overcome this problem.

This is where Next.js comes in, which allows to do server-side rendering, static generation and incremental static generation. Static generation (incremental) allows you to generate all the pages under construction, which will make the application faster because the data is already available and no need to make a request to retrieve the data.

Concretely Next.js offers the possibility to use :

  • Server-side rendering (SEO friendly)
  • Static-generation (SEO friendly)
  • Incremental static generation (SEO friendly)
  • Client-side rendering (Not SEO friendly)

Conclusion

To summarize with Next.js you can use client-side rendering for dashboard or private pages, server-side rendering for frequently changing page content, static generation for static pages and incremental static generation for pages whose content changes occasionally.

It has been deployed on Vercel