1.

In TypeScript like other programming languages doesn't have datatypes like

float, integer instead it only has number type.

2. ts uses inference or it infers the type based on the value we assign, we can't
explicitly define what type of variable will be.

3. We can type cast in ts using as.

4. We can create alias for repetitive data types using type keyword.

5. In JS, we can convert the value of an input element using valueAsNumber by

default it is going to be string.

6. private properties can only be accessed inside the class. If readonly access
modifier we can read it from outside the class but we can't modify both inside and
outside the class.

7. We can use interfaces to create a structure for creating classes or objects that
are implementing it. We don't use interfaces to create objects.

8. tuples in ts can only fix the type of data at each positions but still they are
mutable, they can be modified with the specified type.

pooled connection?
zod
single responsibility principle

1. client components can not be asyncs.

2. to use class based components we need to use client component in next.
3. Link component intercepts the request to the server and handle the routes on the
frontend in the browser and also when next sees the Link on the page it pre fetches
that page in the background, by the time we click on the link it already has that
page.

we need to fetch data to fill the page(since we fetch data in the page where we
need to display that data ) but as we are rendering these pages on the server we
need to fetch the data using apis in these server components itself we can do this
by using async components

when we are fetching the data in server components using fetch, next only fetches
it once and it reuses that wherever we are fetching the same. It caches the
response of any fetches if we leave and comeback to the site, it will use that
cached data which will make pages load instantly, if the data changes frequently we
don't want to cache the data so we can ask next to revalidate the cached data,
means re fetch the data and rebuild the page, we can do this after every particular
interval by using revalidate property to the fetch api.

Not only it caches the data but it also caches the pages they can be rendered in
advance at build time into HTML pages and distributed to CDN and served up quickly
so the page doesn't have to be rendered on the server, to improve the performance
this is called static rendering.

The default loading page wraps only the page but not layout, because the suspense
boundary only wraps the pages. To change this default, we need to use
Suspense and a fallback set to loading component.

We set the value of the state variable for 2 way data binding that means when we
are typing we set the value of the variable but we are not setting the value of the
input box so we need to do the both.
Next.js downloads font files at build time and hosts them with your other static
assets. This means when a user visits your application, there are no additional
network requests for fonts which would impact performance.

Next.js does code splitting by route segments, Splitting code by routes means that
pages become isolated. If a certain page throws an error, the rest of the
application will still work.

whenever <Link> components appear in the browser's viewport, Next.js automatically

prefetches the code for the linked route in the background. By the time the user
clicks the link, the code for the destination page will already be loaded in the
background, and this is what makes the page transition near-instant!

In JavaScript, you can use the Promise.all() or Promise.allSettled() functions to

initiate all promises at the same time.

A "waterfall" refers to a sequence of network requests that depend on the

completion of previous requests. In the case of data fetching, each request can
only begin once the previous request has returned data.

With static rendering, data fetching and rendering happens on the server at build
time (when you deploy) or during revalidation. The result can then be distributed
and cached in a Content Delivery Network (CDN).

Streaming is a data transfer technique that allows you to break down a route into
smaller "chunks" and progressively stream them from the server to the client as
they become ready.

Any UI you embed into loading.tsx will be embedded as part of the static file, and
sent first

Route groups allow you to organize files into logical groups without affecting the
URL path structure. When you create a new folder using parentheses (), the name
won't be included in the URL path

it's good practice to move your data fetches down to the components that need it,
and then wrap those components in Suspense.

Suspense allows you to defer rendering parts of your application until some
condition is met (e.g. data is loaded). You can wrap your dynamic components in
Suspense. Then, pass it a fallback component to show while the dynamic component
loads.

URLSearchParams is a Web API that provides utility methods for manipulating the URL
query parameters

If you're using state to manage the value of an input, you'd use the value
attribute to make it a controlled component. This means React would manage the
input's state.

However, since you're not using state, you can use defaultValue. This means the
native input will manage its own state. This is okay since you're saving the search
query to the URL instead of state.

Debouncing is a programming practice that limits the rate at which a function can
fire.
authentication checks who you are, and authorization determines what you can do or
access in the application.

How Debouncing Works:

Trigger Event: When an event that should be debounced (like a keystroke in the
search box) occurs, a timer starts.
Wait: If a new event occurs before the timer expires, the timer is reset.
Execution: If the timer reaches the end of its countdown, the debounced function is
executed.

data fetching in useEffect

slug
controlled components
how to make components dynamic
tailwind container

we can make api calls to other backends by making async components

we ourselves can make request handlers using api folder and route.js
if we need to do something with the db, then we can directly mutate data in db
we can run async functions on the server i.e., server actions

with generics we able to create multiple variations of functions.

dotenv is a package that loads environment variables from .env file into
process.env object available for us to use globally

The esModuleInterop option in the TypeScript configuration (tsconfig.json) is used

to simplify interoperability between CommonJS and ES modules.

When you set esModuleInterop to true, TypeScript allows you to use ES module syntax
(import/export) in your code even when importing modules that use CommonJS syntax
(require/module.exports). It achieves this by enabling a special form of interop
where require calls are converted to import calls under the hood.