"Dynamically generated websites, backend processing, React framework Nextjs, Content Management System WordPress

Question

"Dynamically generated websites, backend processing, React framework Nextjs, Content Management System WordPress

I'm interested in creating a primarily static site using Next.js, but I also need the ability to provide customers with price estimates based on their specifications. The calculation process needs to be kept private and not exposed to anyone else (otherwise, I would have used plain javascript). I assume that I'll need some kind of server listener to handle requests and respond with the calculated price.

I currently use Host-Europe's Webbuilder pack and have SSH access. Setting up WordPress was as simple as copying over the files and linking the domain to the WordPress folder in Host-Europe's admin panel.

My main queries are:

Can I easily add this functionality to a static website framework, or should I consider switching to a server-side rendering framework like WordPress, React, Django?
Do I need a background process listening for requests? How can I trigger a server-side function via JavaScript and retrieve the response?
Why wasn't a daemon process necessary for WordPress to function? Could Host-Europe be handling this in the background?

If I opt for a framework, I'd prefer either Node/JavaScript or Python, but I'm open to anything that gets the job done efficiently. While I've built a static blog hosted on GitHub Pages before, I feel slightly lost when it comes to more advanced tasks.

javascript wordpress next.js server-side-rendering static-site

Answer 1

Answer №1

To enhance security, consider performing calculations in JavaScript, fetching data from an external source stored on your server, and minifying the javascript code for added obfuscation.
Another option is to take advantage of AWS Lambda functions which offer the first 1 million requests free of charge.
For a straightforward approach, you can develop a basic REST API using Node.JS and Express JS.

Example of Node.js Express.js API

const express = require('express')
const app = express()
const port = 3000

app.get('/calculate-price', (req, res) => {
  response_price = req.query.parameter1 + req.query.parameter2
  res.setHeader('Content-Type', 'application/json');
  res.end(JSON.stringify({ price: response_price }));
})

Utilizing the fetch function in Next JS

export async function getStaticProps(context) {
   const res = await fetch(`https:[your API or cloud function resource]?parameter1=abc&parameter2=1245`)
   const data = await res.json()

  if (!data) {
    return {
      notFound: true,
    }
  }

  return {
     props: { data }, // the price will be passed to the page component as props
   }
}

Answer 2

To enhance security, consider performing calculations in JavaScript, fetching data from an external source stored on your server, and minifying the javascript code for added obfuscation.
Another option is to take advantage of AWS Lambda functions which offer the first 1 million requests free of charge.
For a straightforward approach, you can develop a basic REST API using Node.JS and Express JS.

Example of Node.js Express.js API

const express = require('express')
const app = express()
const port = 3000

app.get('/calculate-price', (req, res) => {
  response_price = req.query.parameter1 + req.query.parameter2
  res.setHeader('Content-Type', 'application/json');
  res.end(JSON.stringify({ price: response_price }));
})

Utilizing the fetch function in Next JS

export async function getStaticProps(context) {
   const res = await fetch(`https:[your API or cloud function resource]?parameter1=abc&parameter2=1245`)
   const data = await res.json()

  if (!data) {
    return {
      notFound: true,
    }
  }

  return {
     props: { data }, // the price will be passed to the page component as props
   }
}

"Dynamically generated websites, backend processing, React framework Nextjs, Content Management System WordPress

Answer №1

Similar questions

Is it possible for Netbeans 7.3 to debug a PHP script when triggered by a JSON request?

Leverage Angular's constant feature in scenarios that extend beyond the

Ensure that every route is prefixed with /api

Generate a key pair using the cryto library and then use it with the json

Steps to set up gapi-script authentication with next-auth in a Next.js application

What is the best way to include a form within every row of an HTML datatables structure?

Sign up for the observable, retrieve the asynchronous mapped outcome with input from the dialog, and then utilize the outcome from the map

Trouble encountered when attempting to override styles in Material UI's TableRow

Tips for creating a stylish scrollbar in a React Material-Table interface

Why are the destinations not sorted in ascending order?

Prevent the onClick event from being triggered by utilizing JSON data

Are there any compatibility issues with uuid v1 and web browsers?

Removing an element from an array within MongoDB

Tips for removing unnecessary debugging code from JavaScript when compiling or minifying your code

Maintaining aspect ratio of canvas while ensuring responsiveness

Deactivate a button when clicked on a card that has been mapped

Adjust the size of the event bar on the FullCalendar resourceTimeline view

How to style the second child div when hovering over the first child div using makeStyles in Material UI

Retrieve data from an array within the user Collection using Meteor and React Native

Learn how to create a half and half color scheme in an HTML table