purpose

Since the separation of the front end and the back end, the practice of a product seems to become less easy because you have to find someone who knows the back end, usually Java PHP, which means higher development costs.

Some might argue that I’m capable and That Node’s performance sucks, but the key to early production is to quickly validate ideas (and I think Vue does this better than React). But switching programming between two languages is always awkward.

Speaking of SSR, I didn’t know what SSR was at first because, like Django, Egg will provide a default template parsing module for dynamically generating web pages.

And with the rise of front-end SPA, more rendering logic is placed on the client side, resulting in CSR (Client-side rendering).

Let from now on directly write the front end of the PEOPLE feel strange to SSR.

SSR simply compiles a static page on the server and sends it to the client.

The advantage of CSR is that all view-related operations are at the front end.

  • advantages
    • Page switching does not interrupt the user experience, and changes to subsequent pages also change the view through data to improve page rendering speed.
  • disadvantages
    • There is no home page loading, that is, the user’s first loading will be very slow, there will be a long time of white screen and other phenomena, for SEO is not friendly.

The advantages of pure SSR are SEO friendly and fast page loading, which can be seen in the Hero generated blog.

  • advantages
    • Pages render fast for the first time and are SEO friendly
  • disadvantages
    • Page content needs to be fully changed every time, and the user experience is not good.

Therefore, the current popular SSR strategy is to load SSR for the first time, and the later load requests data through CSR, and part of the changes are completed.

React SSR framework NEXT

NEXT provides the above solution of first loading THE CSR behind SSR, and enhances the user experience with a mix of SSG (build-time generation) and SSR (server-side rendering) features through contract routing.

But NEXT is just an SSR solution that you can use to build an SEO friendly front end page. Users are not full stack developers, although full stack development is possible through a series of configuration changes.

It still takes a lot of time to find a popular ORM framework, team constraints on file directory naming, API development specifications, and performance monitoring, all of which can be done, but are repetitive and expensive to do well.

Blitz, a full-stack development framework based on NEXT

Blitz built on all of Next’s strengths.

And it’s integrated by default

  • Orm (Object Relational Mapping) framework Prisma
  • Authorized passport. Js
  • An interactive command line interface that allows you to interact with current apis
  • A visual database web connector (no need to look for database operations software)

The document opens with a reference to Ruby on Rails (a Ruby Web development framework that celebrates convention over configuration).

By convention over configuration, you can do a lot of automated code generation.

Tested the waters last night.

Initialize the project

First of all, the installation needs to open the agent. He will download some things from Github, but after the file is generated, he can also cancel it directly, and install the dependency himself through NPM, which is faster than his.

# NPM install blitz db Migrate # NPM install blitz DB MigrateCopy the code

Then we can start the service

NPM start is applied to localhost:3000Copy the code

Blitz looks at the database

We often need to find a DATABASE GUI product to view our data, but Blitz comes with one

NPM Run StudioCopy the code

The generated code

Blitz Generate allows us to generate a lot of template code to improve development efficiency

blitz generate all project
Copy the code

Db /schema.prisma

Because automatically generated templates have a name attribute, it’s confusing, but Blitz always reminds you that this is the Alphe version, which is understandable.

model Project {
  id        Int      @default(autoincrement()) @id
  createdAt DateTime @default(now())
  updatedAt DateTime @updatedAt
+  name      String?
}
Copy the code

It automatically generates form components, list pages, detail pages, etc. You can also choose what you want to generate.

I haven’t found out how to customize the template yet, it would be faster if I had this form.

conclusion

Blitz offers a full-stack development solution out of the box, elegant file directory constraints, an impressive interactive terminal, and a database interface.

In terms of development cost, it greatly reduces the cost of technology selection for developers and quickly enters the business development stage.

Reduce code maintenance costs and, through constraints, no longer have to worry about what a code directory represents.

Of course, it also has its shortcomings. The support documentation for custom services is not perfect, and there is no support for many foreign deployment platforms, Render.com, Vercel and Heroku, but there are really few products for front-end deployment in China.

Details are not perfect, such as the template code for code generation is a bit dead, but the official said that this is the alpha version, which is acceptable.

Finally, this is a future full stack development framework, and there is Ruby on Rails has done the verification of this idea, I believe that after the improvement, perhaps Node overturned, small businesses can directly use this to reduce labor costs, rapid verification of the product, iteration.