Node.jsでMySQLのデータを取得する際、リロードしないと読み込まれない

Question

Node.js(EXPRESS)で、MySQLにINSERT、SELECTできるコードを書きました。
トップページでテーブルのデータを表示、insertページではフォーム送信後にトップページにリダイレクトするようにしました
しかし、毎回リロードを挟まないと、起動時には何も表示されない、insert後は新しいデータが表示されないという感じになってしまいました
nodeを触るのは今日が初めてで色々調べまくってようやく動いたという感じなのでおそらくコードが変なのだと思いますが、やっとDBに接続できたというレベルなので解決できません……

index.js

var express = require('express');
var router = express.Router();

var mysql      = require('mysql');
const mysql_setting = {
  host     : 'localhost',
  user     : '***',
  password : '***',
  database : '***'
};

var posts = [];



/* GET home page. */
router.get('/', function(req, res, next) {
  const connection = mysql.createConnection(mysql_setting);
  connection.connect();
  connection.query('select * from user', function (error, results, fields) {
    if (error) throw error;
    posts = results;
    // posts.forEach(element => {
    //   console.log('name: ' + element.name);
    //   console.log('id: ' + element.id);
    // });
  });
  res.render('index', { title: 'Express' , posts: posts});
  connection.end();
});

router.get('/add', function (req, res, next) {
  const data = {
      errorMessage: ''
  }
  res.render('add',data);
});
 

router.post('/add', function(req, res, next) {
  //var id,name;
  var result = {
    id: req.body.id ,
    name:req.body.name
  };
//  res.render('', result);
  const connection = mysql.createConnection(mysql_setting);
  connection.connect();
  const query = 'insert into user set ?';
  connection.query(query, result,function (error, results, fields) {
    if (error) throw error;
//    console.log("1 recoad inserted"+result.id); 
    res.redirect('/');
  });
});
//module.exports.formInsert = (id, name) => formInsert(id,name);
module.exports = router;

index.jade

extends layout

block content
  h1= title
  p Welcome to #{title}
  a(href='/add') add
  for post in posts
    <p>title: #{post.id}</p>
    <p>content: #{post.name}</p>
  endfor

add.jade

form(action="/add",method="POST")
            input(type="text", name="id" value="")
            input(type="text", name="name" value="")
            input(type="hidden", name="mode" value="input")
            input(type="submit", value="送信")

詳しい方、よろしくお願いいたします

Answer 1

/* GET home page. */
router.get('/', function(req, res, next) {
  const connection = mysql.createConnection(mysql_setting);
  connection.connect();
  connection.query('select * from user', function (error, results, fields) {
    if (error) throw error;
    posts = results;
    console.log('First?');  // ★
    // posts.forEach(element => {
    //   console.log('name: ' + element.name);
    //   console.log('id: ' + element.id);
    // });
  });
  console.log('Second?');  // ★
  res.render('index', { title: 'Express' , posts: posts});
  connection.end();
});

★印の二行を追加してみてください。
コードを見る限りだと First? → Second? の順番で実行されることを期待しているようですが、本当にそうなるかどうかを確認してみてください。

ちなみに、connection.query() の引数の function(...){...} のことをコールバック関数（もしくは単にコールバック）と言います。
もしコールバックのことを知らなければ調べてみてください。

Comments

[l_h_l_h]

回答ありがとうございます
どうやらSQLの実行の方が後に行われるようです
実は質問後も実装を続けていて、他の処理のところで同様の事象が発生して困っていたのですが、そちらはasyncを使って解決できました（したがってこの問題も非同期処理で解決できるはずです）
ですが、他に何か良い方法などありますでしょうか

[2KOH]

async を正しく理解して使いこなすのは、Node.js を始めて数日の初心者には少し難しいかもしれません。

今回の場合だと、async を使うほどではなく、単純に Second? の下の二行を First? の部分に移動すれば解決すると思います。

async とは、非同期処理の際に、コードを読みやすくするための常套手段です。
例えば、コールバックが何重にも入れ子になって煩雑だとか、今回のように上に書いたコードが下に書いたコードより後に実行されて直感的でないとか、そういうときにコードを読みやすくするために使う手法です。
コードを読みやすくするための手段に過ぎないので、async を使っている箇所は当然 async を使わなくても書けます。
「async を使うことでスッキリしたコードが書けた」は正しいですが、もしも「async を使うことでバグを解消できた」と思っているなら、async について勘違いしている可能性があるので、見直しておいてください。

[l_h_l_h]

詳しくありがとうございます
そのような話は個人でやっていくと中々知れないため助かります
少し話がそれてしまうのですが、今回他で困った箇所は、
①SELECT文で得た結果を他のクエリ(のWHEREの部分)でも使用したい
②SQL文の実行が後になるため、式評価の時点でエラーになる
という感じでした
これをasyncを使うことで実行順通りに並べて解決したのですが、確かに入れ子にしていけばそれでも十分そうです
このようなケースなら入れ子にしていくよりasyncを使ったほうが直感的に読みやすい気もするのですが、いかがでしょう　書き直すべきでしょうか
もしよろしければお返事いただければ幸いです

[2KOH]

実際のコードを見ない限り「入れ子になるなら async を使うほうがいい」という原則論しか言えません。
それに、そういうのは他人に聞くより、実際に自分で二通りのやり方で書いてみて見比べる方がいいと思います。
もし二通りのやり方で書く過程で調べてもわからないことがあれば質問をすればいいですが、この質問の本題からは完全に外れているので、別の質問を立てて行ってください。

また、正しく動作するコードが完成しているなら、この件は一旦ここまでにしておいて次に着手する方がいいかもしれません。
コードはできるだけ保守しやすいわかりやすい状態にしておくべきですが、かと言ってあまりに長時間一つのコードとにらめっこするのも良くないので。
ただ、それこそあなたが何の目的でこのプログラムを作っているかがわかりませんし、そもそもプログラミングの質問から外れていてこのサイトにそぐわない内容なので、どちらがいいかなんて答えられませんが。