A new JavaScript project: NestJS and NextJS

NestJS

Photo by Ricardo Gomez Angel on Unsplash
  • Add the controller decorator to a class, then inside the class, we can implement methods and decorate them with HTTP verbs.
  • By default, that will create an HTTP endpoint on the root URL.
  • You can pass a string to the decorator to change the route, or implement dynamic route parameters.
  • A guard to handle role-based user authentication.
  • As a pipe to efficiently validate and transform values in a controller.

NextJS

Photo by Olesya Grichina on Unsplash
  • Where the browser starts with a shell of an HTML page, without any rendered content, from there, the browser fetches the JS file containing the react code to render content to the page and make it interactive.
  1. The content is not reliably indexed by all search engines or read by social media link bots.
  2. It can take longer to reach the first contentful screen when a user first lands on the web page.
  • After that initial page is received, client-side rendering takes over and it works just like a traditional react app.
  • The best of 2 worlds, fully rendered content for search, and highly interactive content for users.
  • Each JS file defined here exports a React component that represents a route in the application.
  • The file structure mirrors the actual URLs that the user will navigate to.

Data fetching

Next can perform multiple server rendering strategies from a single project.

  • Also called pre-rendering, allows you to render your pages at build time.
  • Each page or component can implement a function called getStaticProps() .
  • This way it can fetch data from a cloud database, and then pass the data as props to the component.
  • Then, you can build your app to render all the HTML locally and upload it to a storage bucket where it can be cached by a CDN.
  • This strategy is great for a blog or any app where data doesn’t change often.
  • If data in your app changes often use server-side rendering.
  • Builds the HTML page each time it is requested by the user.
  • In the component, we do data fetching with the getServerSideProps() function.
  • Instead of running during build time, this function runs at request time, which means that the page will fetch the latest data on the server each time a new request is made.
  • This strategy is great for pages with rapidly changing data.
  • This strategy is something in between the last 2.
  • It is implemented by simply adding a revalidate option to get the static props.
  • Next can regenerate whenever a new request comes within a certain time interval.

Resources and more info

Photo by Matt Jones on Unsplash

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Eduardo Ahumada

Eduardo Ahumada

8 Followers

Engineer looking to help and contribute. Learning about Software development and Computer Science.