api_key

Gain insights into building ultra-fast React apps with Next.js. Delve into static optimization, SEO practices, and deploying a giphy search app using the giphy.com API.

Next.js - The ultimate way to build React apps.png

nextjs.tar.gz

next_js

Create-next_js

React is an amazing framework that allows you to build front-ends that are unmatched in speed, functionality, and ease of use. Where React falls short though is its ability to optimize for search engines. That’s where Next.js comes in.

In this course, you will learn to build a giphy search app using the giphy.com API. To kick things off, you’ll learn how to statically optimize a Next.js page, creating an ultra fast loading experience for users. You’ll then dive into the inner workings of creating your giphy search app. 

In the back half of the course, you will learn how to optimize for SEO, and how to deploy your application. By the end, you will have a great new framework to add to your resume and a new shiny application to add to your portfolio.

Next.js - The ultimate way to build React apps

# When should you server-side render a page?
A good way to judge if server-side rendering a page is the right page type for you is to ask yourself a few questions.

* Will the data change often?
* Is the most recent data important?
* Will the page use route parameters in order to determine which data it will retrieve?

If you answered yes to any of those questions, you will need to server-side render the page.



# When HTML gets generated
Lastly, if you remember from a [previous lesson](https://www.educative.io/pageeditor/5404665623609344/5834681560858624/4588615370801152), statically generated pages are created at build time. That means that when someone requests that page, the server has the HTML in hand and serves it to the user right away. When you are server-side rendering a page, the server creates the HTML for every request.

> NOTE: In my experience, the server-side rendered pages are extremely fast. Perhaps not as fast as a statically generated page, but you should not shy away from using this page type if your application requires using it.

# Easy use of server-side rendering
I am going to show you real quickly how easy it is to change a statically rendered page with data to a server-side rendered page. 

Your index.js page, which is also the home page, is statically generated with data. And that's because you wanted to make a default giphy search for *cats*. It was not really important if you had the most updated information, and using a statically generated page provided better performance than requesting giphy API on each page load. For this example, you are going to switch your index.js to a server-side rendered page. It's actually really easy to do. Check out this piece of the current code:






When a page needs the most current data, it cannot be statically generated. You can still have our HTML created on the server and sent to the client, which is what we call a server-side rendered page.

Introduction

Getting Started

Development Tools & Pre-Rendering

Application Development

SEO

Deployment and CI/CD

Conclusion

Server Side Rendered Page with Data

When should you server-side render a page?

When HTML gets generated