This Week's Bulletin #4

Outsourcing Work at 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 the development content on Tuesday morning (8 pages). The deadline for the demo version was initially set for Thursday (later changed to Friday).

In big companies, only outsourcing students are involved in the development of middle and back-end systems (PS. No discrimination against other job types, just a fact).

Alexander#

The reason for my hesitation was that the work I did during this time at the company was too fragmented and did not contribute much to improving my systematic abilities. Additionally, I hadn't worked on any middle or 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 felt like it was an impossible mission.

Breakthrough#

Under pressure, I promised in the group chat on Tuesday that I would complete the framework, so that everyone could start their development work 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 do things you never thought you could do!

Selection#

Here is a simple list, without being embarrassed:

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

As you can see, I didn't put much thought into it. I just installed whatever came to mind. Everything was done for the sake of speed.

The only thing I learned was that by configuring webpack-dev-server --host 0.0.0.0 + devServer.host = 0.0.0.0, the project can be accessed by both IPv4 and IPv6 addresses when running, allowing other machines on the local network to 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. For example, 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. For example, debouncing is often used in input query to prevent frequent requests.

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 scheduling 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 metrics on some browsers. This is a matter of browser compatibility, and it is reasonable to doubt it.

Next.js Learning#

By following 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 for:

Displaying responsive images for different devices and sizes
Specifying dimensions to optimize CLS
Lazy loading images within the viewport (no manual loading)

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 is optimized with prefetching to improve the near-instant open experience.

Page#

Next.js has a special file called page.tsx that supports code-splitting based on path segments, allowing different pages to be independent and not affect each other.

Layout#

Next.js has a special file called layout.tsx that supports partial re-rendering of shared UI components.

Loading#

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

Error#

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

404 NotFound#

Next.js has a special file called not-found.tsx that defines a 404 UI boundary for when a link or resource cannot be found. It takes priority over error.tsx and is displayed if not defined.

Static Generation vs Server-Side Rendering#

Static Generation:

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

Server-Side Rendering:

Frequently changing data
Personalized data for each user
Real-time information

Streaming Rendering#

Streaming rendering in Next.js allows different chunks of a page to be loaded, parsed, and rendered in parallel, effectively avoiding the impact of slow requests on the overall page load. There are two ways to achieve streaming rendering in Next.js:

loading.tsx: A special file in Next.js that serves as a fallback UI for React Suspense, streaming the entire page.
React Suspense: Granular delayed rendering of components or groups of components, dynamically rendering components based on conditions.

When to consider streaming rendering:

User experience, prioritize interaction
Display priority of modules
Data fetching

Best practices:

Whole page: loading.tsx can achieve page-level loading transitions, but it may make users wait too long due to individual components being slow, slowing down the rendering speed of the 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) - Experimental Loading Model#

Pre Partial Render is a partial pre-rendering technique where the fallback part is pre-rendered as static content embedded in the HTML, and the dynamic content is lazily loaded and embedded when the user accesses the corresponding route.

URL Search Params#

Benefits:

Links can be bookmarked and shared
Good for server-side rendering, as the server can also access the parameters for data retrieval and rendering
Carries user query parameters, facilitating user behavior analysis
Passing values through URL query instead of maintaining component state separately

Hooks: