Implement the blog using next. Js in conjunction with GITHUB ISSUE.

The cause of

The reason is that I saw some similar implementations on a website. I plan to do a side-project of my own.

I used to make some descriptive statements about my side-project, providing ideas instead of specifics.

Next was easy to get started fast, with few curves, right

You probably just need to know the common knowledge of the server.

Rendering.

We often talk about SSR as server side rendering. The corresponding server-side rendering, of course, has client-side rendering.

Similar to SPA is client-side rendering.

Let’s start with the router. We know that the front-end router can also perform router functions with the HTML5 API.

Hash OR history mode.

The difference between the two modes is that hash Mode is also a path for server hashchange while history mode may correspond to another asset Path for server history push

Therefore, it is generally necessary to match the server path to the corresponding resource.

And more applications are simple isomorphic implementation.

Server Render does the first screen or SEO optimization, and then the lifecycle data continues to be processed at the front end. Refresh This process is repeated as the page is refreshed.

steps

First, clarify the implementation process steps.

The easiest step:

  1. Get data source
  2. Build the front end page
  3. The deployment of

It’s really just three simple steps.

Data source acquisition

The first is the acquisition of the data source.

Find the github.com API address. According to the steps

  1. To apply for the user token
  2. Find the corresponding API
  3. (Directly use API front-end query)(get all the data itself to do query based on the data) The latter is chosen here because the file size is generally not very large.

For people with strong hands-on skills, the first step is generally not followed by steps.

So step two begins.

We used the V4 version of the GraphQL API.

I like GraphQL.

  1. Query definition is convenient.
  2. The front and back ends can use a set of Query templates.
  3. It’s your first time with next, so try github’s V4 API for the first time.

First, REST apis require interfaces for data, HTTP methods determine operations, and Queries determine results. Operation idempotent.

The first step in GraphQL is to find the endpoint entry node. Used to accept and parse validation to execute the query.

RepositoryConnection: repositoryConnection: repositoryConnection: repositoryConnection: repositoryConnection: repositoryConnection

To learn GraphQL, you need to understand basic concepts of Nodes, Connection, and Edge

First we need to get all of Total’s data sources.

query { 
    repository(owner:"ZWkang", name: "Start-Learning-React") {
    issues(orderBy: {
      direction: DESC,
      field: CREATED_AT
    }, first:1){
      totalCount
    }}
}
Copy the code

Get the totalCount and use it to exchange for all issue Data sources.

Issues Data Query you can try writing it yourself.

Once you get it, write it to the file.

You can also filter the data source. Whatever you like.

Build the front end page.

I don’t really use next very much.

Here are some of the problems I encountered:

1. Customize the server

The first is server start on the server side

You can choose to customize the request to handle, and then precisely control the routing

app.prepare().then((a)= > {})
Copy the code

You can even do router operations with thEnable using existing libraries.

2. Pay attention to the deployment environment

Note whether the deployment environment is node or No Server.

For no server, for example, now publish static file servers. Use dynamic routes for processing.

The principle is to process the router at build time.

3. To run pre-processed CSS /sass, you need to configure the environment in next. Config. js

The configuration is similar to the WebPack configuration.

4. You can use next/ HEAD to customize the HEAD part of the HTML document

5. Use of next/ Link.

Link is a more powerful router that encapsulates as properties, prefetch methods, and so on.

The default behavior of prefetch is to perform prefetch on mouseover. Prefetch is a fetch of a resource in production mode.

For details about what the Next/Link component can do, see the documentation

6. Router problems.

I used server => page to process query within page.

Later, I used now for frequent debugging, and found that the custom server path could not be used on the NOW Server. Seeing the issue, I suggested using dynamic routing.

See this document for details

Also, the router will render twice, and a note was found in the document above at the end.

Note: Pages that are statically optimized by automatic prerendering will be hydrated without their route parameters provided (query will be empty, i.e. {}). After hydration, Next.js will trigger an update to your application to provide the route parameters in the query object. If your application cannot tolerate this behavior, you can opt-out of static optimization by capturing the query parameter in getInitialProps.

Next does a pre-rendering of the route to the page component, so the Query will be empty. To cancel this behavior, use the getInitialProps method.

Sure enough, adding getInitialProps to the component makes this case.

7. Implement code block slicing with dynamic import.

Server-side rendering gives us the benefit of being more granular with the blocks of content that a page actually needs, optimizing load times.

Using the next/dynamic

Because we are using a one-time capture of the data block. (In fact, you can distinguish multiple data blocks, the corresponding page to obtain the corresponding data blocks can also be, the volume is less.)

But considering that my data volume is still very small, so DIRECTLY to the original code to do the shard.

The articleList and Article components are used as asynchronous blocks to fetch data, respectively.

This reduces the size of the first file from 100K to 20K. WOW, that was awesome

deployed

You can deploy the server on the Node side, set up your own server, and use processes like Pm2 to manage run server.js.

If using now, it is recommended to use dynamic routing for deployment.

Now the cli address

Demo address after deployment

  • The demo address

  • Making the address

This article only provides an idea of how to do it. See the code for the implementation.