Support Online
MirrorLooking Glass
GenixNodeGenixNode
Client Panel
Skip to main content

Universal (SSR) Application Development with Nuxt.js and Django

What will you learn in this guide?​

In this guide, you will develop a universal (SSR) web application using Nuxt.js and Django.
The aim is to establish a modern architecture that is SEO compatible and high-performance.

Nuxt.js manages the interface.
Django provides the API and data layer.

🧠 Technical Summary​

This guide explains how to develop universal applications with Nuxt.js and Django.
Problem: SEO and initial loading time problems in SPA applications.
Solution: Server-side rendering (SSR) and API-based architecture.

What is Universal Application?​

Universal implementation is when the code runs on both the server and the browser.
Initial HTML is generated on the server.
Subsequent interactions continue on the client side.

This approach improves SEO and performance.

Prerequisites​

  • Node.js must be installed
  • Python 3 must be installed
  • Must know Django and Vue.js basics

1️⃣ Backend Installation (Django)​

First create the project directory.

mkdir recipes_app
cd recipes_app
  • This command prepares the project folder.
  1. Install Pipenv and start the virtual environment.
pip install pipenv
pipenv shell
  • This step isolates Python dependencies.

Install the required packages.

pipenv install django django-rest-framework django-cors-headers
  • These packages are required to develop the API.

2️⃣ Creating the Django Project​

  1. Start a new Django project.
django-admin startproject api
cd api
  • Build the Core application.
python manage.py startapp core
  • This application manages recipe transactions.

3️⃣ Update Settings​

  1. Add required applications in settings.py file.
INSTALLED_APPS = [
  ...
  'rest_framework',
  'corsheaders',
  'core',
]
  • This setting provides Django REST and CORS support.
  1. Define CORS permissions.
CORS_ORIGIN_WHITELIST = (
  'http://localhost:3000',
)
  • This setting enables frontend access.

4️⃣ Defining the Recipe Model​

class Recipe(models.Model):
    name = models.CharField(max_length=120)
    ingredients = models.CharField(max_length=400)
    picture = models.FileField()
    difficulty = models.CharField(max_length=10)
    prep_time = models.PositiveIntegerField()
    prep_guide = models.TextField()
  • This model represents recipe data.

5️⃣ Creating Serializer and ViewSet​

class RecipeSerializer(serializers.ModelSerializer):
    class Meta:
        model = Recipe
        fields = "__all__"
  • Serializer converts the model to JSON format.
class RecipeViewSet(viewsets.ModelViewSet):
    queryset = Recipe.objects.all()
    serializer_class = RecipeSerializer
ViewSet CRUD işlemlerini otomatik sağlar.

6️⃣ API URL Configuration​

router.register(r'recipes', RecipeViewSet)
  • This structure generates REST endpoints.

7️⃣ Migration and Server Operation​

python manage.py makemigrations
python manage.py migrate
python manage.py createsuperuser
python manage.py runserver
  • These steps prepare the database.

8️⃣ Frontend Installation (Nuxt.js)​

  1. Exit the API directory and create a Nuxt project.
npx create-nuxt-app client
cd client
  • Select Universal (SSR) during installation.

9️⃣ Axios Configuration​

axios: {
  baseURL: "http://localhost:8000/api"
}
  • This setting connects to the Django API.

1️⃣0️⃣ Data Retrieval with asyncData​


async asyncData({ $axios }) {
  const recipes = await $axios.$get("/recipes/");
  return { recipes };
}
  • This function runs before loading data.

1️⃣1️⃣ CRUD Operations​

1. Listing: /recipes/

2. Add: POST /recipes/

3. Update: PATCH /recipes/{id}/

4. Deletion: DELETE /recipes/{id}/

  • These operations comply with the REST standard.

1️⃣2️⃣ Page Transitions and Animation​

.page-enter-active,
.page-leave-active {
  transition: opacity .3s ease;
}
  • This style smoothes page transitions.

❓ Frequently Asked Questions (FAQ)​

1. Why do we use SSR? For SEO and initial load time.

2. Why was Django chosen as the backend? Because it offers strong ORM and REST support.

3. Why was Nuxt.js preferred over SPA? Because it provides universal rendering support.

4. Is this structure scalable? Yes. Frontend and backend are separate.

🎯 Result​

In this guide, you developed a universal application with Nuxt.js and Django. You have established an SEO compatible, high-performance and modern architecture.

You can easily publish this structure on the GenixNode infrastructure. 🚀 Happy development!