search

kitloong / nextjs-dashboard

A Next.JS boilerplate with the famous Open Source Boostrap Admin Template, CoreUI.
https://nextjs-dashboard-olive.vercel.app
MIT License
563 stars 215 forks source link

next selection doubts #17

Closed loakliu closed 10 months ago

loakliu commented 10 months ago

hi～this is a nice project，but I have a doubt about that why next SSR should be used in the admin project. Can you share some special usage scenarios?

kitloong commented 10 months ago

Hi @henniliu , thank you and sorry for late reply.

It is totally up to personal preference or project requirements to use SSR or CSR.

loakliu commented 10 months ago

It is totally up to personal preference or project requirements to use SSR or CSR.

yeah，using SSR or CSR depends on developer preference, When I was making technical options, I wanted to understand the advantages of SSR in the admin project. In my previous work experience, I used Vue or react to develop the CSR model. In most cases, it was a SPA; so in my opinion Of course, I think SSR is mostly used on the Customer end, such as official websites or blogs. During these days, I carefully read the official documentation of next again, which deepened my understanding of next. I think that the application of next SSR in the admin project can make some scenarios more secure, such as SAAS projects, regarding permissions. Control is safer. I don’t know if what I said is correct. I look forward to you sharing some of your opinions，thanks.

kitloong commented 10 months ago

Hi @henniliu

Sure, for me, I prefer SSR first for the following reasons:

  1. Authentication and permission control from the server.
  2. Parse and validate query parameters from the server.
  3. Manipulate session and cookies (rare).

Depending on the situation, if the initial page load is slow, I will move the heavy API to the client side.

For the front end, SSR will help us improve the SEO. I will also add SWR to fetch the latest page content.

While we are discussing the page router, the new Next.JS has a new approach with the app router, which utilize the server component. I highly recommend you have a look into it.

loakliu commented 10 months ago

Hi @henniliu

Sure, for me, I prefer SSR first for the following reasons:

  1. Authentication and permission control from the server.
  2. Parse and validate query parameters from the server.
  3. Manipulate session and cookies (rare).

Depending on the situation, if the initial page load is slow, I will move the heavy API to the client side.

For the front end, SSR will help us improve the SEO. I will also add SWR to fetch the latest page content.

While we are discussing the page router, the new Next.JS has a new approach with the app router, which utilize the server component. I highly recommend you have a look into it.

Thank you for your sharing, it has been very enlightening. I understand that when you mention "heavy API," you are referring to the route.ts file in the app/api directory. I'm working on a after-sales robot project similar to OpenAI, using the next13.4 app router. At the same time, I'm also interested in Next.js authentication, such as nextAuth.js. However, I'm still not very familiar with some API and certain scenarios, and I'm actively learning.

Once again, thank you for your guidance.

loakliu commented 3 months ago

Sorry to bother you again, but I have to say this is an excellent project. By reading and learning from the code, I have gained a lot and even solved many scenarios I faced at work.

In my project, there is a scenario where the client initiates a login, and then the token is stored in cookies. Initially, I placed the action of setting cookies on the server-side page. However, the cookies set on the server-side in Next.js cannot be automatically carried to the client through HTTPS requests. If I directly set cookies on the client side, I worry about security issues. I considered using plugins like OAuth2 or NextAuth, but I wasn't sure how to use them or choose the right one. Then, I thought of this project. The login and registration logic in this project is exactly the functionality I was looking for, and it successfully helped me solve the login and registration issues.

Of course, I will also delve deeper into the use of NextAuth. Once again, thank you for letting me learn so much from this project!

kitloong commented 3 months ago

Thank you. Just for sharing, I have opted next-auth too https://github.com/kitloong/nextjs-dashboard/blob/main/package.json#L29

I will upgrade to next-auth@5.0.0 when it become stable