feat: Enhancing Application Performance with Next.js Server Components

[s2sharpit]

What feature?

Greetings,

I hope this message finds you well. I would like to raise an important point regarding our Next.js application's performance optimization.

Current Situation:

Currently, the entire layout of our Next.js application is treated as a Client Component. This means that all the interactivity logic, including the search functionality (e.g., <SearchBar /> in Projects page), is bundled and sent to the client-side.

Proposed Optimization:

To improve our application's performance, we should follow a more efficient approach. Instead of making the whole layout a Client Component, we can enhance it by moving the interactive logic, like the search functionality, into a dedicated Client Component (e.g., <SearchBar />). Meanwhile, we will keep the main layout as a Server Component.

Benefits:

By adopting this approach, we gain the following advantages:

• Faster Initial Load: The initial HTML rendering is done on the server, leading to faster page loads for users.

• Reduced Client-Side Payload: By moving the interactive logic to a separate Client Component, we only load the necessary JavaScript for that specific functionality on the client-side. This results in a smaller and more optimized JavaScript bundle.

Action Plan:

Let's work together to refactor our Next.js application accordingly. By making use of Server Components for the main layout and Client Components for interactive parts like the search functionality, we can significantly enhance our application's performance without sacrificing functionality.

Thank you for considering this optimization. If you have any questions or need further clarification, please feel free to ask.

Best regards,
Tushar

Add screenshots

.

Record

• I have checked the existing issues
• I have read the Contributing Guidelines
• I agree to follow this project's Code of Conduct
• I'm a GSSoC'23 contributor
• I want to work on this issue

[github-actions]

To reduce notifications, issues are locked. Your issue will be unlock when we will add label as 🏁 status: ready for dev. Check out the contributing guide for more information. Also, if you're in GSSoC'23 please check the discussion

[priyankarpal]

We're already working on backend part and almost finished. We just need a bit more time to test and make sure everything works well. After that all data will come from db & there will be a form to add projects

[s2sharpit]

We're already working on backend part and almost finished. We just need a bit more time to test and make sure everything works well. After that all data will come from db & there will be a form to add projects

Hi @priyankarpal,

Thank you for the update! It's good to know that the backend work is nearly complete. But in this issue, I wanted to discuss an optimization proposal for our Next.js App Router, which won't affect the ongoing backend development or the project form implementation.

The main feature of our Next.js App Router that we'll focus on is utilizing React Server Components. By strategically using server components and designating only interactive parts as client components, we can enhance our website's performance. This approach will improve SEO, achieve faster page loads, and reduce the JavaScript bundle size.

I'll handle the conversion of pages to server components and ensure client components are used efficiently for interactivity.

For more details about React Server Components and their implementation, you can refer to the official documentation: https://nextjs.org/docs/getting-started/react-essentials

Please feel free to ask any questions or seek clarification.

Thank you for considering this optimization proposal. Let's work together to enhance our Next.js App Router and provide an improved user experience.

Best regards,
Tushar

[priyankarpal]

ok ok but make sure to work on previous issue first

[s2sharpit]

ok ok but make sure to work on previous issue first

Hey @priyankarpal, regarding issue #1875, I'd like to propose using the Next.js Metadata API for better SEO. However, before we proceed with its implementation, we need to address this issue first. Could you please assign it to me? Once it's done, I'll take care of the SEO improvement. Thanks!