Javascript

Question 1

What does API stand for?

Answer 1

Application Programming Interface (API)

Question 2

What are the four main HTTP-Verbs?

Answer 2

GET, POST, PUT, DELETE

Question 3

In Next.js, how do you link between pages/URL’s?

Answer 3

Use /pages folder to have URL’s automatically. E.g.
/pages/index.js –> /
/pages/about/index.js –> /about
/pages/about/home.js –> /about/home

Question 4

What does an API generally do?

Answer 4

1. It sets the rules for interacting (if you structure your request like this, i’ll send you data in response that’s structured like this)
2. It handles Data Transfer between the Server and the Code making the request. I.e. it acts as the middleman between the Web-App and the Server and Database.

Question 5

What is an API Endpoint?

Answer 5

A specific URL where the data or functions you want are exposed.

Question 6

In Next.js, how do you pass props to a function/component?

Answer 6

Use getStaticProps() in same file to return props.
e.g:

export async function getStaticProps() {
    const person = await fetch('/person-api');
    return {
        props: { person }
    }
}

export default function Person({ person }) {

}

Question 7

What is the difference between client-side- and server-side-rendering?

Answer 7

Client side rendering renders an empty DOM and then fills it up in the browser (bad for SEO, etc.).

Server side rendering renders the finished HTML on the server and then returns the finished product to the browser.

Question 8

In Next.js, how do you make a dynamic URL?

Answer 8

Use brackets notation –> [id].js
e.g:

/people
[name].js

URL’s:
/people/adam
/people/bob
/people/cathy

Question 9

What is Static Generation?

Answer 9

Static Generation means that the HTML is generated at build time and will be reused on each request.

This is good for pages that can be pre-rendered ahead of a user’s request.

In order to make a page use Static Generation, you can export getStaticProps along with the page component.

Question 10

What is Server-Side-Rendering (SSR)?

Answer 10

Server-Side-Rendering means that the HTML is generated on each request.

This results in slower performance than Static Generation, so use it only if needed or for a good reason.

In order to make a page use SSR, export getServerSideProps along with the page component.

Question 11

What is the boilerplate for SSR?

Answer 11

export async function getServerSideProps(context) {
return {
props: {}, // will be passed to the page component
}
}