DEV Community: Jacob Pelletier

MongoDB Guide | Indexes

Jacob Pelletier — Fri, 17 Feb 2023 04:53:20 +0000

MongoDB Guide | Indexes

by Jacob Pelletier
Contact me for suggestions, comments, or just to say hello at jacob@yankeedo.io! 👋

Follow me on my journey in learning MongoDB.

I highly recommend checking out Mongo University!

What will we be covering in this guide

What is an index.
What is an index used for.
What to consider when using indexes.
How to use indexes.

What are indexes?

Indexes are special data structures that store a portion of the data in and ordered and easy to search way.

Indexes point to document identities, which let you look up things faster.

Indexes improve query performance, reduce disk I/O, and reduce the overall resources required.

All collections have at least one index, the _id field.

Without indexes, MongoDB reads all documents and sorts the results in memory.

With indexes, MongoDB only fetches the documents identified by the index based on the query.

Every query should use at least one index.

When we insert new data, we need up update the index structure. Therefore, while indexes improve read performance, indexes also have a write performance cost.

The most common index types are:

Single field indexes, indexes on one field only.
Compound, indexes from more than one field.

You can also use multikey indexes, which are indexes that operate on an array field.

Create A Single Field Index

Mongo Documentation

Single field indexes are indexes on a single field.🤯
They support queries and sorts on a single field.

We can create a single field index with:
db.coll.createIndex({fieldname:1}) where the 'createIndex' command creates the single field index, the field on which we create the new index will be passed to 'fieldname', and then the order of the sort is given (1 for ascending, -1 for descending).

In the sample airbnb database, here is how we would create a single field index on the (embedded) field of country.

In this same database, we can also create a single field index on the posting URL. This posting URL ought to be unique for every posting. Therefore we can enforce this uniqueness trait when we create a new single field index on host ID.

MongoDB Enforcing Index Uniqueness Docs

If we were to try to insert a new document with an existing posting URL, we would get a duplicate key error.

Check out the indexes on our sample database with db.listingsAndReviews.getIndexes().

Notice the 'listing_url' and 'address.country' indexes in the playground results.

Our indexes from the Atlas Cloud dashboard.

To check if any of these indexes are being used in a query, we can use the explain() command.

In this query, we find the listing in the United States.

The explain() command returns the query plan (seen above in the mongo playground results).

The winningPlan subsection lists the stages that are executed when this query is run. 'IXSCAN' uses the index ("indexName": "address.country_1") to find the country. The 'Fetch' stage reads only the documents that the index has identified.

Note that sorting listings by market (i.e. city) after identifying documents by country adds another stage (SORT) to it's winning scan.

If a common query does not use an index, we should think about adding an index to make this query more efficient (otherwise the query will continue to scan the entire collection).

Because indexes can be a tricky topic, I will include more examples from the MongoDB docs.

Create a Single Field Index;

db.customers.createIndex({
  birthdate: 1
})

Create a Unique Single Field Index

db.customers.createIndex({
  email: 1
},
{
  unique:true
})

View the Indexes used in a Collection

db.customers.getIndexes()

Check if an index is being used on a query a. The IXSCAN stage indicates the query is using an index and what index is being selected. b. The COLLSCAN stage indicates a collection scan is perform, not using any indexes. c. The FETCH stage indicates documents are being read from the collection. d. The SORT stage indicates documents are being sorted in memory.

db.customers.explain().find({
  birthdate: {
    $gt:ISODate("1995-08-01")
    }
  })
db.customers.explain().find({
  birthdate: {
    $gt:ISODate("1995-08-01")
    }
  }).sort({
    email:1
    })

Creating Multikey Indexes.

A multikey index is an index on an array field. While you can have multiple fields as part of an index, you can only include one array field per index.

Using multikey to find listings with the internet amenity.

Note that in the query above, MongoDB uses the multikey amenities index in the 'IXSCAN' stage. Then the documents can be fetched. The index values have each value (i.e. amenity) stored separately.

Because indexes can be a tricky topic, I will include more examples from the MongoDB docs.

Create a Single field Multikey Index

db.customers.createIndex({
  accounts: 1
})

View the Indexes used in a Collection

db.customers.getIndexes()

Compound Indexes

Compound indexes are indexes on multiple fields. This may include one multikey index if an array field is included.

The order of the fields in a compound index matters. Preferably, fields that can be tested by equality first, followed by fields that can be used in sort, followed by fields that can be used for range. The sort order of the field values also matters.

Equality tests are tests which examine fields based on a single value, such as findOne({"host_is_superhost": true}) or find({"bedrooms": 1}). This will reduce the processing time for a query.

Fields suitable for sort are those which can be sorted, for example sort({"number_of_reviews":-1}). This determines the order of the results and eliminates the need for in-memory sorts. Sort order is important if query results are sorted by more than one field and they mix sort order, for example sort({"number_of_reviews":-1, "price.numberDecimal":1}).

Check this query with the explain() command, and you should see our chosen compound key fields under the 'IXSCAN' stage in 'indexName' ("indexName": "bedrooms_1_number_of_reviews_-1_price.numberDecimal_1") in the example above.

Because indexes can be a tricky topic, I will include more examples from the MongoDB docs.

Create a Compound Index

db.customers.createIndex({
  active:1, 
  birthdate:-1,
  name:1
})

Order of Fields in a Compound Index Query:

db.customers.find({
  birthdate: {
    $gte:ISODate("1977-01-01")
    },
    active:true
    }).sort({
      birthdate:-1, 
      name:1
      })

Index:

db.customers.createIndex({
  active:1, 
  birthdate:-1,
  name:1
})

View the Indexes used in a Collection

db.customers.getIndexes()

Cover a query by the Index

db.customers.explain().find({
  birthdate: {
    $gte:ISODate("1977-01-01")
    },
  active:true
  },
  {name:1,
    birthdate:1, 
    _id:0
  }).sort({
    birthdate:-1,
    name:1
    })

Deleting Indexes

Too many indexes can affect performance. But first you need to ensure that an index is not being used, because deleting that index will greatly impact the performance of that query. You can delete any index except for _id. You can hide an index instead of deleting it to test the effect of removing the index from the database. This can be done with the db.collection.hideIndex(<index>) command.

Check out the docs for more information.

The Complete Docs On Indexes

can be found here.

Thank you. Until the next one!

React | Getting Started

Jacob Pelletier — Thu, 16 Feb 2023 21:02:19 +0000

React Guide | Getting Started

by Jacob Pelletier
Contact me for suggestions, comments, or just to say hello at jacob@yankeedo.io! 👋

Follow me on my journey in refreshing my React skills!

What React is good at:

rendering UI

What React is not so good at (and why you should check out my Next.js Guides):

SSG & SSR
Smart Bundling
Global state management
Data fetching to edge servers

What will we be covering in this guide

Brief React background
Create-react-app and brief tour.

Background

React is declarative framework.

Declarative (what) vs Imperative (how).

It's Friday night and I want margaritas.

The imperative journey to retrieve margs:
I arrive at the bar. I approach the bar with a casual confidence. I try to make eye contact with a bartender. Once I make eye contact with a bartender, I do a small head nod. Once the bartender asks what I want, I tell them I want a margarita with top shelf mezcal, mixed with the house mix in a 2(mezcal)-3(mix) ratio, and placed on 3 cubes of ice. No salt or sugar on the rim.

The declarative journey to retrieve margs:
I arrive at the bar. I order a margarita from the bartender.

React is a declarative API for the imperative implementation of code.

SPA (Single Page Application Framework).

React is a SPA, meaning that the app is routed through a single file.

NPM and NodeJS

First, you will need to install NPM. There are a few ways to do this.

curl "https://nodejs.org/dist/latest/node-${VERSION:-$(wget -qO- https://nodejs.org/dist/latest/ | sed -nE 's|.*>node-(.*)\.pkg</a>.*|\1|p')}.pkg" > "$HOME/Downloads/node-latest.pkg" && sudo installer -store -pkg "$HOME/Downloads/node-latest.pkg" -target "/"
brew install node
download from nodejs.org, (https://nodejs.org/).

Next, install some helpful devtools:

React Developer Tools: shows react components and state in the browser.

Verify that you have node and npm installed by entering the following.
node -v
npm -v

npm come with node, and is the package manager for node.

Create React App

See the documentation at: https://create-react-app.dev/docs/getting-started.

Install react app commands:

npx create-react-app my-app
cd my-app
npm start

localhost:3000

Now let's take a look at the files in the 'my-app' folder.

Note the dependencies in package.json.

react is the react package.
react-dom allows react to interact with the browser and DOM. This is essential for web apps.
react-scripts includes essential tools behind create-react-app, like webpack config options.

Note the scripts in package.json.

eject will eject you from create-react-app and allow you to dig deeper into config options.
start starts dev server on port 3000.
build builds static assets for deployment.

The app flows through index.js. As you can see the App component is responsible for what we see on localhost:3000.

Note that the html file for this create-react-app can be found in the public directory. notice the ID of root that index.js selects with document.getElementById('root').

MongoDB Guide | Aggregation

Jacob Pelletier — Thu, 16 Feb 2023 05:07:23 +0000

MongoDB Guide | Aggregation

by Jacob Pelletier
Contact me for suggestions, comments, or just to say hello at jacob@yankeedo.io! 👋

Follow me on my journey in learning MongoDB.

I highly recommend checking out Mongo University!

What will we be covering in this guide

What aggregation is.
What the stages are.

Introduction.

What is aggregation?
Aggregation is an analysis and aggregation of data. An aggregation occurs in one or more stages that process documents. Documents can be filtered, sorted, grouped, and transformed in a pipeline. Outputs of one stage become inputs for another. Aggregations do not affect the original source data.

db.collection.aggregate([
  { $stage_name: {<expression>} },
  { $stage_name: {<expression>} }
])

Each stage is a single operation on the data. Common operation stages are:

$match - filters for data that match criteria.
$group - groups documents based on criteria.
$sort - puts documents in a specified order.

Each stage has its own syntax to carry out its operations.

Field names prefixed with a dollar sign are called "field paths". It allows us to refer to the value in that field.

For example, the code below grabs the values of the first_name and last_name value fields and sets the concatenation of these values to defaultUsername.

$set: {
  defaultUsername: {
     $concat: ["$first_name", "$last_name"]
   }
}

An aggregation is a collection and summary of data. A stage is a built-in methode that can be completed on data (does not alter it). An aggregation pipeline is a series of stages completed in data in some order.

db.collection.aggregate([
    {
        $stage1: {
            { expression1 }...
        },
        $stage2: {
            { expression1 }...
        }
    }
])

Stage Syntax:
{$match: {<query>}}

Query Syntax:
{$expr: {<expression>}}

Method Syntax:
db.collection.aggregate([])

Match and Group Stages

These are very common aggregations.

$match: Filters documents matching some criteria a. takes one argument. b. works exactly like a find command. c. {$match: {"state": "CT"}}. d. place as early as possible so it can use indexes. e. it reduces the amount of documents, and thus the amount of processing required.

*match airbnb example *
Find all airbnbs with 5 or more bedrooms

{ $match: { "beds": { $gte: 5 } } },

$group: Creates a single document for each distinct value. a. groups documents by a group key. b. output is one document for each unique value of the group key. c. requires a group key, specified by _id, the field to group by. d. it may also include one or more fields with an accumulator. e. the accumulator specifies how to aggregate the information for each of the groups.

$group generic example:

$group: 
  {
    _id: <expression>, // group key
    <field>: { <accumulator> : <expression> }
  }

$group airbnb example
Find all airbnbs with 5 or more bedrooms and return the count of each record.

db.listingsAndReviews.aggregate([

    { $match: { "beds": { $gte: 5 } } },

    { $group: { _id: "$beds", count: { $count: {} } } },

    { $sort: { count: -1 } },    

])

Sort and Limit Stage

I had already used sort earlier to make the results more readable.

$sort: as demonstrated in the $group example, the $sort stage sort by some field, such as the count field above.
a. 1 represents ascending order, while -1 represents descending order.
$limit: limits the number of documents that are passed to the next stage.
a. only takes a positive integer

db.listingsAndReviews.aggregate([

    { $match: { "beds": { $gte: 5 } } },

    { $group: { _id: "$beds", count: { $count: {} } } },

    { $sort: { count: -1 } },    

    { $limit: 3 }

])

As you can see, the order of the stages matters. If we were to limit before we sorted, then we would get different results.

Project, Count, and Set Stage

$project: determines resulting output shape. a. specifies fields to return in aggregation. b. similar to find operation. c. should be used last if possible. d. chooses which fields to keep by either inclusion or exclusion. e. set the field to 1 to include, <field> : 1 f. set the field to 0 to include, <field> : 0 g. new value specified for new fields and existing fields can be given a new value, <field> : <new value>

Notice the differences in the project stages below.

Aggregation #1

Aggregation #2

Aggregation #3

$count: counts the number of documents in the pipeline.

For example, if we wanted to count how many bed options above 5 there are, we could perform the following aggregation.

$set: adds or modifies fields in the pipeline.

In this example, we rename beds to _id.

The same pipeline without the $set stage.

Out Stage

$out writes the documents that are returned by an aggregation pipeline into a collection. a. must the the last stage. b. creates a new collection if it does not already exist. c. if the collection exists, $out replaces the existing collection with new data.

Store counts of airbnbs with greater than 5 beds.

MongoDB Guide | Modifying Query Results

Jacob Pelletier — Sat, 04 Feb 2023 15:48:36 +0000

MongoDB Guide | Modifying Query Results

by Jacob Pelletier
Contact me for suggestions, comments, or just to say hello at jacob@yankeedo.io! 👋

Follow me on my journey in learning MongoDB.

I highly recommend checking out Mongo University!

What will we be covering in this guide

Return results of a query in a specified order
Limit number of documents

Returning results of a query in a specified order and limiting the number of documents returned.

To perform theses tasks, we will take advantage of cursors and cursor methods.

A Cursor is a pointer to the result set of a query. There are two cursor methods, cursor.sort() and cursor.limit(). db.collection.find() method returns a cursor of documents that match that query. Cursor methods are chained to queries and perform actions on the result set.

First, connect to our DB and take a look.

Woah, thats a lot of results!

Sort() specifies the order in which the query returns matching documents. You must apply
sort() to the cursor before retrieving any documents from the database.

Note:

MongoDB does not store documents in a collection in a particular order. When sorting on a field which contains duplicate values, documents containing those values may be returned in any order.

If consistent sort order is desired, include at least one field in your sort that contains unique values. The easiest way to guarantee this is to include the _id field in your sort query.

Sort results:
Let's sort by property_type and return listing name alphabetically.

db.listingsAndReviews
.find({property_type:"House"})
.sort({name:1})

A value of 1 means to sort in ascending order, while a value of -1 will mean descending order on that property.

We can add a projection to make the results easier to read.

db.listingsAndReviews
.find({property_type:"House"},
{name:1})
.sort({name:1})

In MongoDB, capitol letters are sorted first, then lowercase letters.

Limit results:

If you wanted return a document on two conditions:

Let's find a house, apartment or condo in the US, sort results by listing name in ascending order, and limit results to 5.

db.listingsAndReviews
.find({property_type: 
  {$in: ["House", "Apartment", "Condo"]},
  "address.country_code": "US"})
.sort({name:1})
.limit(5)

Note: The use of dot notation while accessing nested information is required.

Doing Great! Keep it up!

From MongoDB docs:

Notice that these operations must occur in a specific order. First db.collection.find(), then sort(), then limit().

Choosing what data to return from a query.

Because you rarely want to return EVERYTHING.

This process is called projection (did you catch that we used it above?). Limiting which fields are returned may improve application performance.

The projection from before.

This is an example of a projection.

cd.collection.find(
  {<field1> : <value1>}, 
  {<field2> : <value2>, 
  <field3> : <value3>})

Here, we are finding documents that match <field1> : <value1>, and specifying the projection on {<field2> : <value2>, <field3> : <value3>}. Stop to appreciate the difference between finding a document based on two fields, and this projection.

// finding on two fields
db.collection.find(
  {<field1> : <value1>, 
  <field2> : <value2>})

// finding on one field and projecting on another
cd.collection.find(
  {<field1> : <value1>},
  {<field2> : <value2>})

The ID field (_id) is always returned by default. If you do not wish to return the ID field, you can include _id to the projection and setting the value to 0. By setting the value to 0, you are telling MongoDB to exclude this field from the results.

cd.collection.find(
  {<field1> : <value1>}, 
  {<field2> : <value2>, 
  <field3> : <value3>},
  _id : 0})

Inclusion and exclusion statements cannot be combined!

You can choose to include fields or include fields, but not both.

The only exception to this rule is the _id field, which may be included with inclusion statements.

db.listingsAndReviews
.find({"property_type": 
  {$in: ["House", "Apartment", "Condo"]},
  "address.country_code": "US"},
  {"name":1, "property_type":1, "address.country_code":1, "_id":0})
.sort({name:1})
.limit(5)

From MongoDB docs:

*Can you guess what this query does?
*

db.sales.find({ "customer.age": { $lt: 30 }, 
  "customer.satisfaction": { $gt: 3 }, 
}, 
{ "customer.satisfaction": 1, 
  "customer.age": 1, 
  "storeLocation": 1, 
  "saleDate": 1, 
  "_id": 0, }
);

*What about this code?
*

db.sales.find({ storeLocation: { 
  $in: ["Seattle", "New York"] }, 
}, { 
  couponUsed: 0, 
  purchaseMethod: 0, 
  customer: 0, 
})

Counting documents in a collection

What method allows you to count documents?
db.collection.countDocuments(<query>, <options>

The total number of documents in our listingsAndReviews collection.

The total number of listing with greater than 5 beds.

db.listingsAndReviews
.countDocuments({"beds":{ $gt: 5 }})

From MongoDB docs:

Can you guess what this code does?

db.sales.countDocuments({ 
  items: { 
    $elemMatch: { 
      name: "laptop", 
      price: { $lt: 600 } 
    } 
   } 
})

Resources From Mongo University

Use the following resources to learn more about modifying query results in MongoDB:

Lesson 01: Sorting and Limiting Query Results in MongoDB
MongoDB Docs: cursor.sort()

MongoDB Docs: cursor.limit()

Lesson 02: Returning Specific Data from a Query in MongoDB
MongoDB Docs: Project Fields to Return from Query

MongoDB Docs: Projection Restrictions

Lesson 03: Counting Documents in a MongoDB Collection
MongoDB Docs: db.collection.countDocuments()

See you in the next guide!
Next guide will be posted soon!

MongoDB Guide | Getting Started

Jacob Pelletier — Sat, 04 Feb 2023 01:02:09 +0000

MongoDB Guide | Getting Started

by Jacob Pelletier
Contact me for suggestions, comments, or just to say hello at jacob@yankeedo.io! 👋

Follow me on my journey in learning MongoDB.

I highly recommend checking out Mongo University!

What will we be covering in this guide

Signing up for Atlas
Setting up an Atlas DB
Setting up connection options
Uploading data to our DB

What is MongoDB Atlas?

I will be using MongoDB Atlas instead of Mongo locally during these guides.

Developer data platform.

Database as a service (DBaaS) at its core.

Atlas manages database for you. Databases have built in replication, known as a replica set. A replica set is a group of servers that hold your data. They ensure data redundancy and high availability.

There are two types of database deployments, serverless and dedicated.

Serverless scales on demands and only charges for what you use. Good for variable traffic or sparse usage over time. Often a simpler choice if there are a lot of unknowns.

Dedicated has larger more dedicated resources and more security features and auto-scaling. The preferred choice for production workloads.

Atlas includes operational insights, backups with point-in-time restore, and online archive.

Getting Started

Create a new project

Name your project

Creating a database

Create a DB user

Behold our beautiful new DB!

Load sample data to practice with in the next guide. This will take some time.

See you in the next guide!
Next guide will be posted soon!

Next.js Guide | About pages/

Jacob Pelletier — Fri, 03 Feb 2023 16:25:20 +0000

Next.js Guide | About pages/

by Jacob Pelletier
Contact me for suggestions, comments, or just to say hello at jacob@yankeedo.io! 👋

Guide Prerequisites:

Good Javascript knowledge
Good Typescript knowledge
Basic React knowledge
Ensure Node.js 14.6.0 or newer is installed on your machine.

Follow me on my journey in learning Next.js. These guide break down documentation into little bite size pieces!

I was not born with the knowledge of Next.js, so in addition to hours of suffering, here is where additional wisdom of Next.js will come from:

This guide will use typescript, MongoDB for a database, and tailwind for UI. I also use VS Code.

I will likely add more information in the future as I come across good examples in code.

Previous Post
Next Post (coming soon!)

About Next.js Pages

What does the pages directory do?

Important note from docs:

Next.js 13 introduces the app/ directory (beta). This new directory has support for layouts, nested routes, and uses Server Components by default. Inside app/, you can fetch data for your entire application inside layouts, including support for more granular nested layouts (with colocated data fetching).

I have not chosen to create a guide on the app directory at this time, but maybe in the future!

What does the pages directory do?
From handbook:

Any URL is mapped to the filesystem, to files put in the pages folder, and you don't need any configuration (you have customization options of course).

What is a page?
From docs:

In Next.js, a page is a React Component exported from a .js, .jsx, .ts, or .tsx file in the pages directory. Each page is associated with a route based on its file name.

For example:

If you create pages/about.js that exports a React component like below, it will be accessible at /about.

What is pre-rendering?
From docs:

By default, Next.js pre-renders every page. This means that Next.js generates HTML for each page in advance, instead of having it all done by client-side JavaScript. Pre-rendering can result in better performance and SEO.

Each generated HTML is associated with minimal JavaScript code necessary for that page. When a page is loaded by the browser, its JavaScript code runs and makes the page fully interactive. (This process is called hydration.)

SSG vs SSR

SSG, or Static Site Generation is the recommended form of pre-rendering in the Next.js framework. This means that the HTML is generated at build time and will be reused on each request for the resource.
SSR, or Server Side Rendering on the other hand, is a form of pre-rendering where the HTML is generated on each request of the resource.

"A google crawler inspecting SSR"

From docs:

Importantly, Next.js lets you choose which pre-rendering form you'd like to use for each page. You can create a "hybrid" Next.js app by using Static Generation for most pages and using Server-side Rendering for others.

We recommend using Static Generation over Server-side Rendering for performance reasons. Statically generated pages can be cached by CDN with no extra configuration to boost performance. However, in some cases, Server-side Rendering might be the only option.

You can also use Client-side data fetching along with Static Generation or Server-side Rendering. That means some parts of a page can be rendered entirely by client side JavaScript. To learn more, take a look at the Data Fetching documentation.

When should I use SSG?

Whenever possible because it is much faster than rendering a page with every request.
Marketing pages
Blogs and portfolios
E-commerce product listing
Help and documentation

Create A Blank Slate To Work From

Before our experiments to learn more about pages and routing, I deleted the files home.module.css, _documents.tsx, and I deleted all the contents of globals.css and replace the contents of index.tsx with:

function Home() {
  return <div>Welcome to Next.js!</div>
}

export default HomePage

Before edits:

After edits:

localhost:3000 result:

I will cover pages with dynamics routes into its own guide.

Static Generation

From docs:

If a page uses Static Generation, the page HTML is generated at build time. That means in production, the page HTML is generated when you run next build . This HTML will then be reused on each request. It can be cached by a CDN.
In Next.js, you can statically generate pages with or without data. Let's take a look at each case.

Static Generation Without Data

At this time, add a new about.tsx page as shown above.

Add the following code to the about.tsx page:

function About() {
  return <div>About</div>
}

export default About

And there you have it, a statically generated site with no data. Well the journey here was exciting. The result? Maybe not so much. Let's make it more interesting with data.

Static Generation With Data

From docs:

Some pages require fetching external data for pre-rendering. There are two scenarios, and one or both might apply. In each case, you can use these functions that Next.js provides:

Your page content depends on external data: Use getStaticProps.
Your page paths depend on external data: Use getStaticPaths (usually in addition to getStaticProps).

Scenario 1: Your page content depends on external data:

// TODO: Need to fetch `posts` (by calling some API endpoint)
//       before this page can be pre-rendered.
export default function Blog({ posts }) {
  return (
    <ul>
      {posts.map((post) => (
        <li>{post.title}</li>
      ))}
    </ul>
  )
}

To fetch this data on pre-render, Next.js allows you to export an async function called getStaticProps from the same file. This function gets called at build time and lets you pass fetched data to the page's props on pre-render.

export default function Blog({ posts }) {
  // Render posts...
}

// This function gets called at build time
export async function getStaticProps() {
  // Call an external API endpoint to get posts
  const res = await fetch('https://.../posts')
  const posts = await res.json()

  // By returning { props: { posts } }, the Blog component
  // will receive `posts` as a prop at build time
  return {
    props: {
      posts,
    },
  }
}

Scenario 2: Your page paths depend on external data

Dynamic routes will be covered in a guide of their own in the future!

Server Side Rendering

If a page uses Server-side Rendering, the page HTML is generated on each request.

From docs:

To use Server-side Rendering for a page, you need to export an async function called getServerSideProps. This function will be called by the server on every request.

For example, suppose that your page needs to pre-render frequently updated data (fetched from an external API). You can write getServerSideProps which fetches this data and passes it to Page like below:

export default function Page({ data }) {
  // Render data...
}

// This gets called on every request
export async function getServerSideProps() {
  // Fetch data from external API
  const res = await fetch(`https://.../data`)
  const data = await res.json()

  // Pass data to the page via props
  return { props: { data } }
}

Summary

Static Generation (Recommended): The HTML is generated at build time and will be reused on each request. To make a page use Static Generation, either export the page component, or export getStaticProps (and getStaticPaths if necessary). It's great for pages that can be pre-rendered ahead of a user's request. You can also use it with Client-side Rendering to bring in additional data.

Server-side Rendering: The HTML is generated on each request. To make a page use Server-side Rendering, export getServerSideProps. Because Server-side Rendering results in slower performance than Static Generation, use this only if absolutely necessary.

Previous Post
Next Post (coming soon!)

Next.js Guide | Getting Started

Jacob Pelletier — Fri, 03 Feb 2023 15:43:17 +0000

Next.js Guide | Getting Started

by Jacob Pelletier
Contact me for suggestions, comments, or just to say hello at jacob@yankeedo.io! 👋

Guide Prerequisites:

Good Javascript knowledge
Good Typescript knowledge
Basic React knowledge
Ensure Node.js 14.6.0 or newer is installed on your machine.

Follow me on my journey in learning Next.js. These guide break down documentation into little bite size pieces!

I was not born with the knowledge of Next.js, so in addition to hours of suffering, here is where additional wisdom of Next.js will come from:

This guide will use typescript, MongoDB for a database, and tailwind for UI. I also use VS Code.

I will likely add more information in the future as I come across good examples in code.

Getting Started

From docs:

We recommend creating a new Next.js app using create-next-app, which sets up everything automatically for you. (You don't need to create an empty directory. create-next-app will make one for you.)...

If you want to start with a TypeScript project you can use the --typescript flag:

npx create-next-app@latest --typescript
# or
yarn create next-app --typescript
# or
pnpm create next-app --typescript

From docs:

Run npm run dev or yarn dev or pnpm dev to start the development server on http://localhost:3000
Visit http://localhost:3000 to view your application
Edit pages/index.js and see the updated result in your browser

The installer will then start the install, and will ask you a series of configuration questions. See how I set up my project below:

Once the installation is complete, navigate into the project folder and run npm run dev.

You can verify that the base project is working by visiting localhost:3000.

Checkout the default scripts in the package.json file.

From docs:

These scripts refer to the different stages of developing an application:

dev - Runs next dev to start Next.js in development mode
build - Runs next build to build the application for production usage
start - Runs next start to start a Next.js production server
lint - Runs next lint to set up Next.js' built-in ESLint configuration

Also note the pages and public folders at the root of the project directory.

From docs:

Next.js is built around the concept of pages. A page is a React Component exported from a .js, .jsx, .ts, or .tsx file in the pages directory. You can even add dynamic route parameters with the filename.

Inside the pages directory, add the index.js file to get started. This is the page that is rendered when the user visits the root of your application.

pages - Associated with a route based on their file name. For example, pages/about.js is mapped to /about

public - Stores static assets such as images, fonts, etc. Files inside public directory can then be referenced by your code starting from the base URL (/).

Notice that I also choose to start with a /src directory.

From docs:

Pages can also be added under src/pages as an alternative to the root pages directory.

The src directory is very common in many apps and Next.js supports it by default.

Important notes on /src directory:

From docs:

src/pages will be ignored if pages is present in the root directory

Config files like next.config.js and tsconfig.json, as well as environment variables, should be inside the root directory, moving them to src won't work. Same goes for the public directory

A guide on how to use environmental variable with Next.js and Typescript is coming up!

There you have it. You are ready to start your first Next.js project!

Thank you for stopping by!

Two Pointers - Sum of Three Values

Jacob Pelletier — Fri, 03 Feb 2023 05:12:16 +0000

Two Pointers Pattern | Sum of Three Values | For Beginners

by Jacob Pelletier

Follow me as I document my journey as I (quickly) work through the 24 patterns of Leet Code Questions in Javascript as a nice refresher for myself. This resource, in addition to Leet Code, is excellent preparation for any interview!

I am no Ph.D. in C.S. (just with a lowly B.S.) and this isn't meant to be an authoritative or heavily theoretical guide. This is guide is meant to be fun, fast, and casual.

Each article in this series will seek to plainly explain:

The pattern
The problem
The solution in JS

If anyone at all ends up reading these things I will post solutions in TS in the future! 😜

Additional problems common of the two pointer pattern, in addition to sum of three values, are:

Two Pointers
Reverse Words in a String

Explaining The Sum of Three Values Problem.

The Sum of Three Values Problem is a classic computer science problem. It involves finding three numbers from an array of numbers such that the sum of these three numbers is equal to a given value. We consider solving this problem using the Two Pointer method as discussed in the course the 24 patterns.

Given an array of integers, nums, and an integer value, target, determine if there are any three integers in nums whose sum equals the target. Return TRUE if three such integers are found in the array. Otherwise, return FALSE.

Steps to solve:

Sort the array in ascending order.
Loop through the entire array and set up two pointers (low and high) on every iteration.
Low is set to the current loop index + 1, and high is set to the last index of the array.
In an inner loop, look for values that, along with the current element, sum up to target.
Calculate the sum of array elements pointed to by the current loop index, and the low and high pointers.
If the sum is equal to target, return TRUE.
Else if the sum is greater than target, move the high pointer backwards.
Else if the sum is less than target, move the low pointer forwards.
Terminate the inner loop when low reaches r crosses high. Reset low to the current loop element +1, and reset high to the last index.
If, after processing the entire array, we don't find a triple that matches our requirement, we return FALSE.

Problem #1 With Solution

Problem #1:

Solution:

My Solution:

Output:

Analysis

Space: O(n)
Time: O(1)

Thanks for tuning in, more algo content on the way as I move through it myself!