DEV Community: Dan N

Next.js: getStaticProps, getServerSideProps, useEffect???

Dan N — Fri, 30 May 2025 23:01:33 +0000

I'm creating a Next.js web app where users can create private logs and attach tags to them. These logs are displayed initally on the main page, and when a new one is added, the page updates automatically. I ran into the question; how do I fetch all of the existing data from the database and display them to the user with Next.js?

Next offered a couple of function options (getStaticProps, getServerSideProps) and I finally landed on a regular React one (useEffect) after some trial and error.

I started with getStaticProps first just to make sure my fetching funcationality was working.

getStaticProps from next docs:

The data required to render the page is available at build time ahead of a user’s request

The data comes from a headless CMS

The page must be pre-rendered (for SEO) and be very fast — getStaticProps generates HTML and JSON files, both of which can be cached by a CDN for performance

The data can be publicly cached.

I realized that the data I was working with isn't something that I'd like publicly cached. The logs I'm working with aren't like tweets or blog posts, but rather private to whoever's posting them.

So, I looked to getServerSideProps next.
getServerSideProps from next docs:

You should use getServerSideProps if you need to render a page that relies on personalized user data, or information that can only be known at request time. For example, authorization headers or a geolocation.

It seemed to fit the use case. It runs on the server, and when a user visits a page, getServerSideProps will be used to fetch data at request time. The data is used to render the initial HTML of the page.

It's also fast! This seemed to fit my use case. However, I realized I’d need to be able to run whatever logic I put in there again to update the logs page if someone made a new log. getServerSideProps will do a ONE TIME fetch on the server before rendering your page. It will no longer do anything until a full page refresh.

I finally found what fit my use case, useEffect!
useEffect:

useEffect is a React Hook that lets you synchronize a component with an external system

It's a lifecycle method that activates whenever your component rerenders, based on the criteria you pass it.
Think of an app that refetches new data based on a user clicking a button; useEffect can wait for that click then do a new fetch.

Yes, it's slower than getServerSideProps, but I could get it to run again if a user submits a new log to display the new entry!

Adding, Updating, and Removing Subdocuments with Mongoose

Dan N — Fri, 11 Dec 2020 17:31:00 +0000

I was building an application when I ran into a problem; how do I use subdocuments?

I found a way that worked for what I needed; I'll use an example where the application has users and each user can have one or more posts.

Here's what the model for the posts could look like:

const mongoose = require("mongoose");

const postSchema = new mongoose.Schema({
  title: { type: String, required: true },
  text: { type: String },  
});

const Post = mongoose.model("Post", postSchema);

module.exports = Post;

And here's the model for the user:

const mongoose = require("mongoose");
const postSchema = require("./post.js").schema; //or wherever post.js is

const userSchema = new mongoose.Schema({
  name: { type: String, required: true },
  details: { type: String },
  userid: { type: String, required: true,
    index: {
      unique: true,
    }
  },
  posts: [postSchema]
});

const User = mongoose.model("User", userSchema);

module.exports = User;

The important thing to note here is that the each user will have an array of posts and that each of those is an array of post schemas, not the post model itself.

Adding subdocuments

Now let's get to adding the subdocuments!

For adding posts, I have this where I have this where I have my routes:

const Project = require("../models/project.js");

router.put("/addpost/:id", (req, res) => {

  //find the user first, then add the post to it
  User.findById(req.params.id, function(err, result) {
    if (!err) {
      if (!result){
        res.sendStatus(404).send('User was not found').end();
      }
      else{
        result.posts.push(req.body);
        result.markModified('posts'); 
        result.save(function(saveerr, saveresult) {
          if (!saveerr) {
            res.status(200).send(saveresult);
          } else {
            res.status(400).send(saveerr.message);
          }
        });
      }
    } else {
      res.status(400).send(err.message);
    }
  });
});

Here, I look for the existing user first (There's more than one way to do this; I did it by using findById() and passing in the id from the route parameter). The part that tripped me up here was, what do I do after finding the user? It turns out that I can edit the result in the callback of the find directly - by adding the new post to the user's post array, and then using the save() function to save those changes to the user in MongoDB! If I go to my database on MongoDB and navigate to the user I just edited, I'll be able to find the post I created for that particular user under the "posts" array. If I expand that post, I should be able to see that MongoDB created a unique id for it. This will be important later.

Updating subdocuments

router.put("/updatepost/:id", (req, res) => {
  //find user by its id, update its post with what's in req.body
  User.findById(req.params.id, function(err, result) {
    if (!err) {
      if (!result){
        res.status(404).send('User was not found');
      }
      else{
        result.posts.id(req.body._id).title = req.body.title;
        result.posts.id(req.body._id).text = req.body.text;
        result.markModified('posts'); 
        result.save(function(saveerr, saveresult) {
          if (!saveerr) {
            res.status(200).send(saveresult);
          } else {
            res.status(400).send(saveerr.message);
          }
        });
      }
    } else {
      res.status(400).send(err.message);
    }
  });
});

First, I find the user like I did before. This time, since I'm looking for an existing post, I can use id() to find that post in the posts array identified by its unique id. I set the fields that I want to change and then use save() to save the user.

Removing subdocuments

router.put("/removepost/:id", (req, res) => {
  //find the user by the id parameter first, then locate and remove the post specified by the id in req.body 
  User.findById(req.params.id, function(err, result) {
    if (!err) {
      if (!result){
        res.status(404).send('User was not found');
      }
      else{
        result.posts.id(req.body._id).remove(function(removeerr, removresult) {
          if (removeerr) {
            res.status(400).send(removeerr.message);
          }
        });
        result.markModified('posts'); 
        result.save(function(saveerr, saveresult) {
          if (!saveerr) {
            res.status(200).send(saveresult);
          } else {
            res.status(400).send(saveerr.message);
          }
        });
      }
    } else {
      res.status(400).send(err.message);
    }
  });
});

For this last part, I again first located the user. Then I found the specific post I wanted to delete by its id using id() and then removed it by calling remove(). Again, I used save() to save the changes.

For reference: https://mongoosejs.com/docs/subdocs.html

Deploying a Django Blog App on Heroku

Dan N — Sun, 13 Sep 2020 16:35:47 +0000

(For personal reference, this is what worked for me)

I tried a couple ways to deploy a Django blog app to Heroku and finally found a way that worked for me!

I used the django-heroku library. It helps automatically configure DATABASE_URL, ALLOWED_HOSTS, WhiteNoise (for static assets), Logging, and Heroku CI for the application so we don’t have to ourselves. For reference, https://github.com/heroku/django-heroku

I also used gunicorn, which is a Python WSGI HTTP Server for UNIX. (I don't install this locally since I'm working in a windows environment but since Heroku needs gunicorn for deployment, I have it as something Heroku itself needs to download)

Here’re the things that I added/steps that I took:

requirements.txt

Let Heroku know what packages it needs to download in a requirements.txt file in the main directory. In here we have Django, django-heroku, and gunicorn

maindirectory/requirements.txt:

Django~=<version number>
gunicorn
django-heroku

Procfile

Set up a Procfile in the main directory (important: it needs to be titled as Procfile, not Procfile.txt!) A Procfile declares what commands should be run by Heroku in order to start up the website.

maindirectory/Procfile:

web: gunicorn <mysite>.wsgi --log-file -

This line means that we're deploying a web application and that it should be started by running gunicorn mysite.wsgi

settings.py

Configure the app using django-heroku somewhere in settings.py

maindirectory//settings.py:

# Configure Django App for Heroku.
import django_heroku
django_heroku.settings(locals())

Install Heroku

*This step can be skipped if it's already done

Install the Heroku CLI from here: https://devcenter.heroku.com/articles/heroku-cli

Authenticate the Heroku account on the computer by running this command:

$ heroku login

Deploy

Now to deploy to Heroku! Create a heroku application on the command line:

$ heroku create <app name>

commit changes and push

$ git add .
$ git commit -m "some message"
$ git push heroku

We’ve deployed your code to Heroku, and specified the process types in the Procfile (we chose a web process type earlier). We can now tell Heroku to start this web process.

To do that, run the following command:

$ heroku ps:scale web=1

We can now visit the app in our browser with heroku open.

$ heroku open