This Week's Bulletin #4

Outsourcing Work in Big Companies#

It was a week of outsourcing. On Tuesday, I was given the task of creating a demo for the AI competition in our team. I built a backend information management system framework from scratch, aligning with the development content on Tuesday morning (8 pages). The deadline for the demo version was initially set for Thursday (later changed to Friday).

Alexander#

The reason for my hesitation was that the work I had been doing in the company was too fragmented and did not contribute much to the improvement of systematic capabilities. Additionally, I hadn't worked on any middle and back-end projects for a long time, so I felt unfamiliar with them. I only gave myself 2-3 days to complete the task, and I always thought it was an impossible mission.

Breakthrough#

Under pressure, I promised in the group on Tuesday that I would complete the framework so that everyone could start their development smoothly on Wednesday and not delay the progress. Each person was responsible for their own page, and we completed 80% of the work for the demo version on Wednesday and Thursday. On Thursday or Friday, the boss and senior management recognized our work, which gave us a great sense of accomplishment. I was also quite satisfied with myself. Sometimes, you are forced to bring out your best.

Selection#

Here is a simple list, without fear of embarrassment:

Framework: webpack5+React18+react-router-dom
Component system: antd
Language: ts+sass
Others: immer, schedule-x, dayjs

It can be seen that I didn't put much thought into it. I just installed whatever came to mind, all for the sake of speed.

The only thing I gained was knowing that by configuring webpack-dev-server --host 0.0.0.0 + devServer.host = 0.0.0.0, after running the project, the IPv4/6 project running address is displayed, and other machines on the local network can access the local service.

Learning While Slacking Off#

Throttle vs Debounce#

Throttling means that a function can only be executed once within a certain period of time, and multiple triggers within that period will be ignored. Used for scrolling.

Debouncing means that a function will be executed after a certain period of time has passed since the last trigger, and if there are multiple triggers within that period, the timer will be reset. Used for input query debouncing.

How to Find Packages#

It turns out that the fastest way to find the desired package is to search for keywords on npm, like this:

keywords:react schedule

Based on the search results, I recommend several schedule components:

Combined with a Google search, you will most likely find the package you want and can use.

Performance Optimization#

Browser Compatibility#

The core-web-vitals package provided by Google's web-vitals API may not accurately calculate the corresponding metric values on some browsers. This is a browser compatibility issue, and it is reasonable to doubt it.

Next.js Learning#

Referring to the Next.js tutorial, I learned about its considerations for performance optimization.

Font Optimization#

Next.js provides next/font/google and next/font/local to merge font resources into static assets, eliminating the need for loading and optimizing Cumulative Layout Shift (CLS).

Image Optimization#

Next.js provides the Image component:

Responsive images for different devices and sizes
Explicit dimensions to optimize CLS
Lazy loading, only loading images within the viewport (no manually)

import Image from 'next/image';
export default function Page() {
  return <Image
           src={'/hero-desktop.png'}
           width={1000}
           height={760}
           className="hidden md:block"
           alt="Screenshots of the dashboard project showing desktop version"
           />
}

Link Optimization#

Next.js provides the Link component, which supports client-side navigation instead of full page refresh.

import Link from 'next/link';
export default function Page() {
  return <Link
           key={link.name}
           href={link.href}
           className="flex h-[48px] grow items-center justify-center gap-2 rounded-md bg-gray-50 p-3 text-sm font-medium hover:bg-sky-100 hover:text-blue-600 md:flex-none md:justify-start md:p-2 md:px-3"
           >{link.name}
  </Link>
}

In production, when the Link component appears in the viewport, it has prefetch optimization, providing a near-instant open experience.

Page#

Next.js has a special file called page.tsx - path segments, which supports code-splitting based on routes, making different pages independent and unaffected by each other.

Layout#

Next.js has a special file called layout.tsx - shared UI partial re-render.

Loading#

Next.js has a special file called loading.tsx - route-level asynchronous component with Suspense fallback.

Error#

Next.js has a special file called error.tsx - captures unexpected exceptions and defines an Error UI boundary.

404 NotFound#

Next.js has a special file called not-found.tsx - defines a 404 UI boundary when a link/resource cannot be found. It takes priority over error.tsx. If not defined, error.tsx will be displayed.

Static Generation vs Server-Side Rendering#

Static Generation:

Better user experience
Static content is cacheable, reducing server load
Good for SEO

Server-Side Rendering:

Frequently changing data
Personalized data for different users
Real-time information

Streaming Rendering#

Parallel loading, parsing, and rendering of different chunks in a page, effectively avoiding the impact of slow requests on the overall page loading. Next.js provides two ways to achieve streaming rendering:

loading.tsx, a special file in Next.js, serves as the fallback UI for the React Suspense component, streaming the entire page.
React Suspense, granular delayed rendering of components, dynamically rendering components based on conditions.

When to consider streaming rendering?

User experience, prioritize interaction
Priority of module display
Data fetching

Best practices:

Whole page: loading.tsx can achieve page-level loading transition, but it may make users wait too long due to some components being slow, slowing down the rendering speed of page content.
Every component: Components appear one after another, which is not a great experience.
Page section: Create a wrapper component to wrap multiple components.

PPR - Pre Partial Render#

Pre Partial Render, partial pre-rendering. The fallback part is pre-rendered as static content embedded in HTML, and dynamic content is lazy-loaded and embedded when the corresponding route is accessed.

URL Search Params#

Benefits:

Links can be bookmarked and shared
Good for SSR, the server can also get the parameters for data fetching and rendering
Carry user query parameters, good for user behavior analysis
Passing values through URL Query instead of maintaining component state separately

Hooks: